/* ==========================================================================
   MEDIX — medix.sy
   Visual system: OFF+BRAND. — "Iridescent sphere on warm parchment"

   Typographic architecture on warm parchment. A single geometric sans carries
   the expressive weight; one iridescent gradient sphere is the only chromatic
   event on the page. Hairline structure, 0px card radius, 10px on interactive
   elements, and no shadows anywhere — the system is flat, like ink on paper.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typefaces

   The reference system's sole typeface, Ataero Retina OB Edition, is a custom
   face that cannot be licensed here. Outfit — MEDIX's own geometric sans, with
   the same tall x-height and generous counters — stands in for it and is the
   sole Latin voice across the system. Weight 400 serves body and display
   alike; weight 700 is reserved for small labels and navigation.
   Qomra Arabic carries Arabic, restricted by unicode-range.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Outfit";
  src: url("./assets/outfit-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Qomra Arabic";
  src: url("./assets/qomra-arabic-regular.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Qomra Arabic";
  src: url("./assets/qomra-arabic-medium.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Qomra Arabic";
  src: url("./assets/qomra-arabic-bold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

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

:root {
  /* MEDIX brand — sampled from the official lockup, not approximated.
     Deep is the lockup background, Teal is the X, White is MEDI. */
  --color-deep: #012637;
  --color-slate: #04384c;
  --color-teal: #0bb3a1;
  --color-teal-deep: #07756a;  /* the same teal, darkened for legibility on Mist */
  --color-mint: #72e3d6;
  --color-aqua: #baf7ef;
  --color-mist: #f4faf8;
  --color-paper: #ffffff;

  /* Two deviations from the reference's fixed 255deg / 0-30-65-100 gradient,
     both forced by the palette swap:
     1. Mint and aqua are far paler than the reference's pink and blue, so the
        brand teal is held to 22% and the stops pushed back — otherwise the
        disc washes out to a pale blob and the brand colour disappears.
     2. The angle is mirrored to 75deg so the teal end faces the headline and
        the white end dissolves outward. At 255deg the white end lands beside
        the white display type and competes with it on a Deep canvas.
     Set both back to 255deg / 0-30-65-100 to return to the reference exactly. */
  --sphere-stops: var(--color-teal), var(--color-teal) 22%, var(--color-mint) 55%, var(--color-aqua) 80%, var(--color-paper);
  --gradient-sphere: linear-gradient(75deg, var(--sphere-stops));
  --gradient-sphere-rtl: linear-gradient(285deg, var(--sphere-stops));

  /* Semantic layer. These carry the OFF+BRAND surface roles — canvas, elevated
     surface, hairline, ornament — and flip wholesale per section via .on-deep
     and .on-slate. Light is the default. */
  --canvas: var(--color-mist);        /* surface 0 — page canvas */
  --surface: var(--color-paper);      /* surface 1 — elevated cards and cells */
  --type: var(--color-deep);
  --type-muted: rgba(1, 38, 55, 0.68);   /* 5.4:1 on Mist */
  --hairline: rgba(1, 38, 55, 0.18);
  --ornament: rgba(1, 38, 55, 0.12);
  --accent: var(--color-teal-deep);      /* 5.3:1 on Mist */
  --on-accent: var(--color-mist);        /* type sitting on an accent fill */

  /* Typography — Font Families */
  --font-ataero-retina-ob-edition: "Outfit", "Qomra Arabic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "Qomra Arabic", "Outfit", "Noto Sans Arabic", Tahoma, sans-serif;

  /* Typography — Scale (fluid, anchored to the system's exact desktop sizes) */
  --text-caption: 11px;
  --leading-caption: 1.4;
  --tracking-caption: 0.05em;      /* 0.55px at 11px — the brand signature */
  --text-body-sm: 15px;
  --leading-body-sm: 1.4;
  --tracking-body-sm: 0.006em;     /* 0.15px at 15px */
  --text-body: 18px;
  --leading-body: 1.4;
  --tracking-body: 0.013em;        /* 0.23px at 18px */
  --text-subheading: clamp(26px, 2.6vw, 34px);
  --leading-subheading: 1;
  --tracking-subheading: 0.013em;  /* 0.44px at 34px */
  --text-heading-sm: clamp(31px, 3.5vw, 46px);
  --leading-heading-sm: 1;
  --tracking-heading-sm: 0.013em;  /* 0.6px at 46px */
  --text-heading: clamp(40px, 5.2vw, 70px);
  --leading-heading: 0.8;
  --tracking-heading: 0.013em;     /* 0.91px at 70px */
  --text-heading-lg: clamp(44px, 5.7vw, 76px);
  --leading-heading-lg: 0.8;
  --tracking-heading-lg: 0.013em;  /* 0.99px at 76px */
  --text-display: clamp(52px, 7.6vw, 103px);
  --leading-display: 0.8;
  --tracking-display: 0.013em;     /* 1.34px at 103px */

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-46: 46px;
  --spacing-76: 76px;
  --spacing-119: 119px;

  /* Layout */
  --page-max-width: 1400px;
  --section-gap: var(--spacing-76);
  --card-padding: var(--spacing-30);
  --element-gap: var(--spacing-19);
  --gutter: var(--spacing-30);
  --inset: max(var(--gutter), calc((100% - var(--page-max-width)) / 2));
  --header-height: var(--spacing-76);

  /* Border Radius */
  --radius-md: 6.47619px;
  --radius-lg: 9.52381px;
  --radius-3xl: 30.4762px;

  /* Named Radii — 0px on every card surface, 10px on every interactive one */
  --radius-cards: 0px;
  --radius-links: 10px;
  --radius-inputs: 10px;
  --radius-buttons: 10px;

  /* Surfaces — the three OFF+BRAND levels, in MEDIX colour */
  --surface-canvas: var(--canvas);
  --surface-raised: var(--surface);
  --surface-panel: var(--color-slate);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2b. Themes

   The page alternates bands: a deep hero, light body sections, a slate panel,
   a deep footer. A band declares its theme once and every component inside it
   — hairlines, cards, ornaments, accents, button fills — re-resolves.
   -------------------------------------------------------------------------- */

.on-deep,
.on-slate {
  --type: var(--color-paper);
  --type-muted: rgba(255, 255, 255, 0.6);   /* 8.7:1 on Deep */
  --hairline: rgba(255, 255, 255, 0.18);
  --ornament: rgba(11, 179, 161, 0.28);     /* the ornament carries the teal */
  --accent: var(--color-teal);              /* 6.0:1 on Deep */
  --on-accent: var(--color-deep);
  background: var(--canvas);
  color: var(--type);
}

.on-deep {
  --canvas: var(--color-deep);
  --surface: var(--color-slate);   /* elevated = one step toward the light */
}

.on-slate {
  --canvas: var(--color-slate);
  --surface: #06485f;   /* one step above Slate */
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--type);
  font-family: var(--font-ataero-retina-ob-edition);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: `hidden` would make the body a scroll container and
     break the sticky trust heading. */
  overflow-x: clip;
}

body[dir="rtl"] { font-family: var(--font-arabic); }

/* Arabic never carries Latin tracking — it would break the joined script. */
body[dir="rtl"],
body[dir="rtl"] * { letter-spacing: normal; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; letter-spacing: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-links);
}

.skip-link {
  position: fixed;
  top: -6rem;
  left: var(--gutter);
  z-index: 100;
  padding: var(--spacing-8) var(--spacing-19);
  background: var(--surface);
  color: var(--type);
  border-radius: var(--radius-links);
  font-size: var(--text-body-sm);
}
.skip-link:focus { top: var(--spacing-15); }

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

/* --------------------------------------------------------------------------
   4. Shared components
   -------------------------------------------------------------------------- */

/* Section Label — museum signage. 11px, all caps, 0.05em tracking. */
.label {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  color: var(--type);
}

.section-kicker {
  display: flex;
  align-items: baseline;
  gap: var(--element-gap);
  padding-bottom: var(--spacing-15);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
.section-kicker span:first-child { color: var(--accent); }

/* Ghost Text Link — the conventional button, removed. */
.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-5) 0;
  border-radius: var(--radius-links);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--type);
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ghost-link > span:first-child {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.ghost-link:hover > span:first-child { border-bottom-color: var(--accent); }
.ghost-link:hover .arrow { color: var(--accent); }
.ghost-link .arrow { transition: transform 0.25s cubic-bezier(0.7, 0, 0.2, 1); }
.ghost-link:hover .arrow { transform: translateX(4px); }
body[dir="rtl"] .ghost-link .arrow { transform: scaleX(-1); }
body[dir="rtl"] .ghost-link:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* Pill ghost button — the only state-change control in the system. */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-15);
  padding: var(--spacing-8) var(--spacing-19);
  border: 1px solid var(--accent);
  border-radius: var(--radius-buttons);
  background: transparent;
  color: var(--type);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.pill-link:hover,
.pill-link:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}
body[dir="rtl"] .pill-link .arrow { transform: scaleX(-1); }

/* Concentric Circle Ornament — 1px ash outlines, never filled, never animated. */
.rings {
  position: absolute;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 0;
}
.rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ornament);
  border-radius: 50%;
}
.rings span:nth-child(1) { width: 100%; aspect-ratio: 1; }
.rings span:nth-child(2) { width: 145%; aspect-ratio: 1; }
.rings span:nth-child(3) { width: 196%; aspect-ratio: 1; }

/* --------------------------------------------------------------------------
   5. Header — minimal top bar, no sticky behaviour
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-height);
  padding-inline: var(--inset);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--spacing-30);
  border-bottom: 1px solid var(--hairline);
}

/* The wordmark PNG is already the brand lockup — white MEDI, teal X. Both
   bands that carry it (header, footer) are Deep, so it needs no recolouring. */
.brand img {
  width: 132px;
  height: auto;
}

nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
}
nav a {
  padding: var(--spacing-5) 0;
  border-radius: var(--radius-links);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
nav a:hover { border-bottom-color: var(--accent); }

.language-switch {
  padding: var(--spacing-8) var(--spacing-15);
  border: 1px solid var(--accent);
  border-radius: var(--radius-buttons);
  background: transparent;
  color: var(--type);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.language-switch:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   6. Hero — full-viewport, one gradient sphere, one display block
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(880px, calc(100svh - var(--header-height)));
  padding: var(--spacing-76) var(--inset) var(--spacing-46);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--spacing-30);
  overflow: hidden;
}

.hero-sphere {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 44%;
  transform: translateY(-50%);
  width: min(54vh, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-sphere);
}

.hero .rings {
  left: 50%;
  top: 44%;
  transform: translateY(-50%);
  width: min(54vh, 580px);
  aspect-ratio: 1;
}

/* Sphere and ornament mirror with the reading direction. */
body[dir="rtl"] .hero-sphere,
body[dir="rtl"] .hero .rings { left: auto; right: 50%; }
/* mirrored with the layout, so the teal end still faces the headline */
body[dir="rtl"] .hero-sphere { background: var(--gradient-sphere-rtl); }

.hero-content {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-block: var(--spacing-46);
}

.hero .eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: var(--spacing-46);
}

.hero h1 {
  max-width: 10ch;
  margin: 0;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

.hero-lede {
  max-width: 52ch;
  margin: var(--spacing-46) 0 var(--spacing-30);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.hero-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--type-muted);
  /* clears the fixed scroll indicator in the corner */
  padding-inline-end: 130px;
}
.hero-foot-rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* Scroll Indicator — bottom-right, 30px inset, gone once the page moves. */
.scroll-indicator {
  position: fixed;
  right: var(--spacing-30);
  bottom: var(--spacing-30);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--type);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body[dir="rtl"] .scroll-indicator { right: auto; left: var(--spacing-30); }
body.is-scrolled .scroll-indicator { opacity: 0; }

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

.section { padding: var(--section-gap) var(--inset); }

.section h2 {
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-regular);
}

.section p { letter-spacing: var(--tracking-body); }

.purpose-grid h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

/* Founder-intro block: label + ghost link left, body copy right. */
.purpose-grid {
  margin-top: var(--spacing-76);
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--spacing-76);
  align-items: start;
}
.purpose-aside {
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
  align-items: flex-start;
  padding-top: var(--spacing-6);
}
.purpose-copy p {
  margin: 0 0 var(--spacing-19);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.purpose-copy p:last-child { margin-bottom: 0; }

/* Three principles, divided by hairlines. */
.principles {
  margin-top: var(--spacing-76);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
.principles article {
  padding: var(--spacing-30) var(--spacing-30) 0 0;
  border-right: 1px solid var(--hairline);
  min-height: 220px;
}
.principles article + article { padding-left: var(--spacing-30); }
.principles article:last-child { border-right: 0; padding-right: 0; }
.principles strong {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
}
.principles h3 {
  margin: var(--spacing-46) 0 var(--spacing-15);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-regular);
}
.principles p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

/* --------------------------------------------------------------------------
   8. Ground grid — 2 rows × 5 columns of Paper cells on an Ash lattice
   -------------------------------------------------------------------------- */

.ground-intro {
  margin: var(--spacing-76) 0 var(--spacing-46);
  max-width: 60ch;
}
.ground-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  border: 1px solid var(--hairline);
  background: var(--hairline);
}
.ground-grid div {
  display: grid;
  place-items: center;
  min-height: 119px;
  padding: var(--spacing-19);
  background: var(--surface);
  border-radius: var(--radius-cards);
  text-align: center;
}
.ground-grid span {
  max-width: 60%;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Products — grid-paper cards on Paper
   -------------------------------------------------------------------------- */

.products-intro {
  margin: var(--spacing-76) 0 var(--spacing-46);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--spacing-76);
  align-items: end;
}
.products-intro p { margin: 0; max-width: 46ch; }

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--element-gap);
  align-items: stretch;
}

.product-card {
  position: relative;
  overflow: hidden;
  padding: var(--card-padding);
  border-radius: var(--radius-cards);
  background:
    linear-gradient(to right, var(--canvas) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(to bottom, var(--canvas) 1px, transparent 1px) 0 0 / 30px 30px,
    var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
  min-height: 460px;
}

.product-index,
.product-status {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}
.product-index { color: var(--accent); }
.product-status { font-weight: var(--font-weight-bold); }

.product-identity { display: grid; gap: var(--spacing-8); }
.product-identity h3 {
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-regular);
}
.product-identity small {
  font-size: 0.5em;
  font-weight: var(--font-weight-regular);
  color: var(--accent);
}

.product-description {
  margin: 0;
  max-width: 44ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

.product-mark {
  position: absolute;
  right: var(--spacing-30);
  bottom: var(--spacing-19);
  z-index: 0;
  font-size: 180px;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--ornament);
  pointer-events: none;
}
body[dir="rtl"] .product-mark { right: auto; left: var(--spacing-30); }

.product-card > *:not(.product-mark) { position: relative; z-index: 1; }

.demo-invitation {
  margin-top: auto;
  padding-top: var(--spacing-19);
  border-top: 1px solid var(--hairline);
}
.demo-label {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--accent);
}
.demo-invitation p {
  margin: var(--spacing-8) 0 var(--spacing-19);
  max-width: 42ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

/* --------------------------------------------------------------------------
   10. Trust
   -------------------------------------------------------------------------- */

.trust { position: relative; overflow: hidden; }
.trust .rings {
  left: -180px;
  bottom: -220px;
  width: 300px;
  aspect-ratio: 1;
}
body[dir="rtl"] .trust .rings { left: auto; right: -180px; }

.trust-layout {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-76);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--spacing-76);
}
.trust-heading { position: sticky; top: var(--spacing-46); align-self: start; }
.trust-heading p {
  margin: var(--spacing-30) 0 0;
  max-width: 44ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

.trust-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.trust-steps li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--element-gap);
  padding: var(--spacing-30) 0;
  border-bottom: 1px solid var(--hairline);
}
.trust-steps > li > span {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
}
.trust-steps h3 {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-bold);
}
.trust-steps p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

/* --------------------------------------------------------------------------
   11. Syria — Stone panel, level 2 surface
   -------------------------------------------------------------------------- */

.syria {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-119) var(--inset);
  display: flex;
  align-items: flex-end;
  min-height: 620px;
}
.syria-word {
  position: absolute;
  top: -2vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 0.8;
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-regular);
  color: transparent;
  -webkit-text-stroke: 1px var(--ornament);
  white-space: nowrap;
  pointer-events: none;
}
.syria-copy {
  position: relative;
  z-index: 1;
  max-width: 62ch;
}
.syria-copy h2 {
  margin: var(--spacing-30) 0 0;
  max-width: 18ch;
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
.syria-copy > p:last-child {
  margin: var(--spacing-30) 0 0;
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* --------------------------------------------------------------------------
   12. About + footer
   -------------------------------------------------------------------------- */

.about-grid {
  margin-top: var(--spacing-76);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--spacing-76);
  align-items: end;
}
.about-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-30);
}
.about-grid p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

footer {
  padding: var(--spacing-76) var(--inset) var(--spacing-30);
  border-top: 1px solid var(--hairline);
}
footer > p {
  margin: var(--spacing-46) 0 var(--spacing-76);
  max-width: 44ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--element-gap);
  padding-top: var(--spacing-15);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--type-muted);
}

/* --------------------------------------------------------------------------
   13. RTL adjustments — mirrored structure, loosened leading
   -------------------------------------------------------------------------- */

/* Qomra's ch is wider than Outfit's, so the Arabic headline needs a tighter
   character measure to stack into two lines and stay clear of the sphere. */
body[dir="rtl"] .hero h1 { line-height: 1.05; max-width: 9ch; }
body[dir="rtl"] .section h2,
body[dir="rtl"] .syria-copy h2 { line-height: 1.3; }
body[dir="rtl"] .principles h3 { line-height: 1.3; }
body[dir="rtl"] .syria-word { line-height: 1.1; }

body[dir="rtl"] .principles article {
  padding: var(--spacing-30) 0 0 var(--spacing-30);
  border-right: 0;
  border-left: 1px solid var(--hairline);
}
body[dir="rtl"] .principles article + article { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
body[dir="rtl"] .principles article:last-child { border-left: 0; padding-left: 0; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  :root { --section-gap: var(--spacing-46); }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-5);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span:not(.sr-only) {
    width: 22px;
    height: 1px;
    background: var(--type);
  }

  nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-19) var(--inset);
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
  }
  nav.open { display: flex; }
  nav a {
    padding: var(--spacing-15) 0;
    border-bottom: 1px solid var(--hairline);
  }
  nav a:last-child { border-bottom: 0; }

  .hero { min-height: 0; padding-top: var(--spacing-46); }
  .hero-foot { padding-inline-end: 0; }
  .hero-sphere,
  .hero .rings {
    left: auto;
    right: 0;
    top: 32%;
    width: min(46vw, 400px);
  }
  body[dir="rtl"] .hero-sphere,
  body[dir="rtl"] .hero .rings { right: auto; left: 0; }
  .hero-lede { max-width: 36ch; }
  .hero h1 { max-width: 9ch; }

  .purpose-grid,
  .products-intro,
  .trust-layout,
  .about-grid { grid-template-columns: 1fr; gap: var(--spacing-46); }

  .principles { grid-template-columns: 1fr; }
  .principles article,
  body[dir="rtl"] .principles article,
  body[dir="rtl"] .principles article + article {
    padding: var(--spacing-30) 0;
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .principles article:last-child,
  body[dir="rtl"] .principles article:last-child { border-bottom: 0; }
  .principles h3 { margin-top: var(--spacing-30); }

  .ground-grid { grid-template-columns: repeat(3, 1fr); }
  .product-list { grid-template-columns: 1fr; }
  .product-card { min-height: 0; }
  .trust-heading { position: static; }
  .syria { min-height: 0; }
}

@media (max-width: 620px) {
  :root {
    --gutter: var(--spacing-19);
    --section-gap: var(--spacing-46);
  }

  .hero { padding-bottom: var(--spacing-76); }
  .hero-sphere {
    position: static;
    width: min(64vw, 250px);
    justify-self: end;
    transform: none;
  }
  body[dir="rtl"] .hero-sphere { justify-self: start; }
  .hero .rings {
    top: var(--spacing-46);
    right: var(--gutter);
    left: auto;
    transform: none;
    width: min(64vw, 250px);
  }
  body[dir="rtl"] .hero .rings { right: auto; left: var(--gutter); }
  .hero-lede { max-width: none; }
  .hero h1 { max-width: 8ch; }
  .hero .eyebrow { margin-bottom: var(--spacing-30); }
  .hero-lede { margin-block: var(--spacing-30); }
  .hero-foot span:first-child { display: none; }

  .ground-grid { grid-template-columns: repeat(2, 1fr); }
  .ground-grid div { min-height: 96px; }
  .product-mark { font-size: 120px; }
  .trust-steps li { grid-template-columns: 1fr; gap: var(--spacing-8); }
  .syria-word { font-size: 34vw; top: var(--spacing-30); }
  .footer-meta { flex-direction: column; }
  .scroll-indicator { right: var(--spacing-19); bottom: var(--spacing-19); }
  body[dir="rtl"] .scroll-indicator { right: auto; left: var(--spacing-19); }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */

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