/* ============================================================
   EGYTEK SOLUTIONS
   Aesthetic: precision instrument. Dark chassis, hairline rules,
   thermal (ironbow) false-colour as the single accent system.
   ============================================================ */

:root {
  --bg: #0A0B0D;
  --bg-2: #0F1116;
  --surface: #14171D;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #EDEFF2;
  /* Text on a dark chassis optically thins, so body copy is set
     brighter and heavier than the light-background equivalent:
     body 11.9:1, small labels 6.4:1 against --bg.
     (--dim began at #626A75, which measured 3.6:1 and failed AA.) */
  --muted: #C3CAD3;
  --dim: #8C94A2;
  --red: #C81E1E;
  --red-hot: #FF4A38;
  --amber: #F5A623;
  --thermal: linear-gradient(90deg, #0B1B3F 0%, #3B1E6E 22%, #A81E5C 44%, #E0431C 66%, #F5A623 84%, #FFE9A8 100%);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --display: 'Archivo', 'Archivo Black', system-ui, sans-serif;
  --rail: 58px;
  --nav-h: 62px;

  /* Chassis tokens that flip with the theme. The hero stays dark in
     both themes (white type over a photographic scrim), so anything
     inside it uses the fixed --on-dark pair rather than --text. */
  --chrome-rgb: 10, 11, 13;
  --rail-bg: linear-gradient(180deg, rgba(20, 23, 29, 0.8), rgba(10, 11, 13, 0.8));
  --hero-scrim: linear-gradient(180deg, rgba(10, 11, 13, 0.74) 0%, rgba(10, 11, 13, 0.36) 40%, var(--bg) 96%);
  --thermal-text: linear-gradient(90deg, #E0431C 0%, #FF4A38 26%, #F5A623 58%, #FFE9A8 78%, #FF6A3D 100%);
  --logo-filter: brightness(1.22) saturate(1.1);
  --grain-opacity: 0.22;
  --grain-blend: overlay;
  --on-dark: #EDEFF2;
  --on-dark-dim: #A9B1BC;
}

/* ============================================================
   Light theme. Contrast against --bg #F6F7F9:
   text 16.9:1, body 7.3:1, labels 4.8:1, red 6.2:1, accent 5.3:1.
   ============================================================ */
[data-theme="light"] {
  --bg: #F6F7F9;
  --bg-2: #EDEFF3;
  --surface: #FFFFFF;
  --line: rgba(14, 20, 32, 0.12);
  --line-strong: rgba(14, 20, 32, 0.26);
  --text: #12161C;
  --muted: #4B535F;
  --dim: #666E7B;
  --red: #B71818;
  --red-hot: #C42A18;
  --amber: #96600A;
  --chrome-rgb: 246, 247, 249;
  --rail-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(237, 239, 243, 0.9));
  --hero-scrim: linear-gradient(180deg, rgba(10, 12, 16, 0.78) 0%, rgba(10, 12, 16, 0.52) 45%, rgba(10, 12, 16, 0.44) 82%, var(--bg) 100%);
  --thermal-text: linear-gradient(90deg, #B71818 0%, #D6371A 30%, #A2670B 62%, #C2321A 100%);
  --logo-filter: none;
  --grain-opacity: 0.10;
  --grain-blend: multiply;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 10px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  /* 300 reads too thin for body copy on a dark background */
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
  background: var(--red-hot);
  color: #fff;
}

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

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
}

/* Hidden with clip rather than a negative offset: a large negative
   `left` becomes real scrollable width once the page is RTL. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
}

.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  inset-inline-start: 8px;
  top: 8px;
}

/* ---------- atmosphere: grain + engineering grid ---------- */
.grain,
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain {
  z-index: 3;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid-overlay {
  z-index: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 60;
  background: rgba(var(--chrome-rgb), 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}

.nav.scrolled {
  background: rgba(var(--chrome-rgb), 0.96);
}

.nav-inner {
  width: min(1180px, 92vw);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.nav-brand img {
  width: 108px;
  height: auto;
  filter: var(--logo-filter);
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-menu a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.nav-menu a:hover {
  color: var(--text);
  border-bottom-color: var(--red-hot);
}

.nav-menu .nav-cta {
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
  padding: 9px 16px;
  border-radius: 50px;
  transition: all 0.25s ease;
}

.nav-menu .nav-cta:hover {
  background: var(--red-hot);
  border-color: var(--red-hot);
  color: #fff;
}

/* Language switcher. Scoped to .nav-menu so it outweighs `.nav-menu a`,
   whose padding-bottom and transparent border-bottom would otherwise
   win on specificity and push the label off-centre. Flex centring keeps
   the Arabic label optically centred despite its taller font metrics. */
.nav-menu .lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 50px;
}

.nav-menu .lang-switch:hover {
  color: var(--text);
  border-color: var(--red-hot);
}

/* Arabic fragments inside the Latin page (and the Arabic page itself) */
[lang="ar"] {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: normal;
}

/* theme toggle */
.theme-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--red-hot);
  transform: rotate(18deg);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* show the icon for the theme you would switch TO */
.theme-toggle .icon-moon {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- measurement rail ---------- */
.rail {
  position: fixed;
  top: var(--nav-h);
  bottom: 0;
  left: 0;
  width: var(--rail);
  z-index: 30;
  border-right: 1px solid var(--line);
  background: var(--rail-bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  backdrop-filter: blur(6px);
}

.rail .ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 22px);
  opacity: 0.6;
}

.rail .rule {
  position: relative;
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}

.rail .mark {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--dim);
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

/* ---------- shell ---------- */
.shell {
  position: relative;
  z-index: 1;
}

.wrap {
  width: min(1180px, 90vw);
  margin: 0 auto;
}

section {
  position: relative;
  padding: 92px 0;
}

/* ---------- headings ---------- */
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin: 0;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(30px, 5vw, 58px);
}

/* medium rather than regular: on a dark background 400 still reads
   washed out at body sizes */
p,
footer li {
  color: var(--muted);
  font-weight: 500;
}

.slabel {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 26px;
}

.slabel::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.slabel b {
  color: var(--red-hot);
  font-weight: 500;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 48px;
  overflow: hidden;
}

/* The source photographs are 569x500. Stretched edge to edge as one
   image they were scaled ~2.9x and looked soft, so they are laid out
   as a panel array instead: 12 tiles over 2/4/6 columns keeps every
   tile at or below its native size at any viewport, which reads sharp
   and doubles as the instrument-array motif. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
}

/* lower contrast than a single photo would need, so the separate
   tiles even out and read as one surface rather than a patchwork */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.4);
}

@media (min-width: 700px) {
  .hero-media {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1700px) {
  .hero-media {
    grid-template-columns: repeat(6, 1fr);
  }
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--thermal);
  mix-blend-mode: color;
  opacity: 0.42;
}

.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--hero-scrim);
}

.sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34vw;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 168, 0.10), rgba(255, 74, 56, 0.16), transparent);
  animation: sweep 7s cubic-bezier(.6, 0, .4, 1) infinite;
}

@keyframes sweep {
  0% {
    transform: translateX(-40vw);
  }

  100% {
    transform: translateX(140vw);
  }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 11, 13, 0.5);
  backdrop-filter: blur(4px);
  margin: 0;
}

h1 {
  font-size: clamp(42px, 11.5vw, 156px);
  font-weight: 900;
  margin: 22px 0 0;
  letter-spacing: -0.045em;
  color: var(--on-dark);
}

h1 .thermal-text {
  /* warm half of the ironbow ramp only, so the line stays legible
     at every point of the animation, in either theme */
  background: var(--thermal-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shift 9s ease-in-out infinite alternate;
}

@keyframes shift {
  to {
    background-position: 100% 0;
  }
}

.hero-sub {
  max-width: 46ch;
  margin: 24px 0 0;
  font-size: clamp(14px, 1.6vw, 18px);
  color: #C3C9D1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-hot);
  border-color: var(--red-hot);
  transform: translateY(-2px);
}

.btn-ghost {
  background: #fff;
  color: var(--red);
  border-color: #fff;
}

.btn-ghost:hover {
  background: var(--red-hot);
  border-color: var(--red-hot);
  color: #fff;
  transform: translateY(-2px);
}

.readout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 42px;
  background: rgba(10, 11, 13, 0.55);
  backdrop-filter: blur(6px);
}

.readout div {
  padding: 15px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.readout span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--on-dark-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.readout b {
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}

/* ---------- ticker ---------- */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  overflow: hidden;
  background: var(--bg-2);
  white-space: nowrap;
}

/* Two identical groups sliding by exactly half the track. For the loop
   to be seamless each group must be at least as wide as the strip, so
   main.js clones items into them until that holds at any viewport. */
.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  will-change: transform;
}

.ticker-group {
  display: flex;
  flex: 0 0 auto;
  gap: 42px;
  padding-inline-end: 42px;
}

.ticker-track i {
  color: var(--red-hot);
  font-style: normal;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- capability matrix ---------- */
.two-col h2 {
  margin-bottom: 14px;
}

.matrix {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

/* --pad-start is the resting inset. It applies to every cell so the
   hover accent bar never sits hard against the copy, and so the second
   column clears the divider. Logical properties keep the whole thing
   mirrored in RTL without a parallel set of overrides. */
.cell {
  --pad-start: 20px;
  position: relative;
  padding-block: 32px;
  padding-inline-start: var(--pad-start);
  padding-inline-end: 24px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  transition: background 0.35s ease;
  overflow: hidden;
}

.cell::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--thermal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1);
}

.cell:hover {
  background: var(--surface);
}

.cell:hover::before {
  transform: scaleY(1);
}

.cell .idx {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--red-hot);
  letter-spacing: 0.1em;
  padding-top: 6px;
}

.cell h3 {
  font-size: clamp(18px, 2.4vw, 27px);
  margin-bottom: 8px;
}

.cell p {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.7;
}

.cell .spec {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cell .spec em {
  font-style: normal;
  border: 1px solid var(--line);
  padding: 4px 9px;
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.stat {
  background: var(--bg);
  padding: 30px 22px;
}

.stat .num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--red-hot) 10%, var(--amber) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat .cap {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 12px;
}

/* ---------- how we work ---------- */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.step {
  background: var(--bg);
  padding: 30px 26px;
  transition: background 0.3s ease;
}

.step:hover {
  background: var(--surface);
}

.step .n {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--red-hot);
}

.step h3 {
  font-size: 21px;
  margin: 14px 0 10px;
}

.step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
}

/* ---------- about ---------- */
.about-grid {
  display: grid;
  gap: 26px;
}

.about-body p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
  max-width: 66ch;
}

.about-body p:last-child {
  margin-bottom: 0;
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.contact-card {
  background: var(--bg);
  padding: 28px 24px;
  display: block;
  transition: background 0.3s ease;
}

.contact-card:hover {
  background: var(--surface);
}

.contact-card .k {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

.contact-card b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
}

.contact-card b a:hover {
  color: var(--red-hot);
}

.contact-card .go {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-hot);
}

.social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.social a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.25s ease;
}

.social a:hover {
  color: #fff;
  border-color: var(--red-hot);
  background: var(--red);
  transform: translateY(-2px);
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 40px;
  background: var(--bg-2);
}

.foot-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.foot-logo {
  width: 118px;
  height: auto;
  filter: var(--logo-filter);
  margin-bottom: 16px;
}

.foot-tag {
  font-size: 14.5px;
  max-width: 42ch;
  margin: 0;
}

footer h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 16px;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer li {
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--muted);
}

footer li a:hover {
  color: var(--red-hot);
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s cubic-bezier(.2, .7, .2, 1), transform 0.75s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
}

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

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 899px) {
  .burger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    width: min(320px, 82vw);
    height: calc(100vh - var(--nav-h));
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
    padding: 30px 26px;
    overflow-y: auto;
  }

  .nav-menu.open {
    transform: translateX(0);
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-menu li {
    border-bottom: 1px solid var(--line);
  }

  .nav-menu a {
    display: block;
    padding: 18px 2px;
    font-size: 12px;
    border-bottom: none;
  }

  .nav-menu .nav-cta {
    margin-top: 18px;
    text-align: center;
    padding: 15px 16px;
  }

  /* keep the language switcher a chip rather than a full-width row */
  .nav-menu .lang-switch {
    display: inline-flex;
    margin-top: 16px;
    padding: 10px 20px;
  }

  .nav-menu li:has(.lang-switch) {
    border-bottom: none;
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }
}

@media (min-width: 900px) {

  /* menu takes the free space so it and the toggle sit right */
  .nav-menu {
    margin-inline-start: auto;
  }

  .theme-toggle {
    margin-inline-start: 0;
  }
}

@media (min-width: 720px) {
  .readout {
    grid-template-columns: repeat(4, 1fr);
  }

  .matrix {
    grid-template-columns: 1fr 1fr;
  }

  .cell {
    --pad-start: 30px;
    border-inline-end: 1px solid var(--line);
    padding-inline-end: 30px;
  }

  .stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
  }

  .about-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
  }

  .foot-top {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 40px;
  }
}

@media (min-width: 1024px) {
  .rail {
    display: flex;
  }

  .shell {
    padding-left: var(--rail);
  }

  .nav-inner {
    padding-left: var(--rail);
  }
}