/* كود مدار — design tokens and the shared shell.
   One file, no framework: every page pulls the same vocabulary from here. */

:root {
  /* surfaces */
  --bg: #0E0F13;
  --surface: #15171D;
  --surface2: #1C1F27;
  --line: #262A35;

  /* text */
  --text: #F3F4F7;
  --muted: #9AA3B2;
  --faint: #6B7280;

  /* brand */
  --violet: #9B6BDE;
  --violet-d: #7A4BC9;
  --violet-t: rgba(155, 107, 222, .14);
  --mint: #46E0C0;
  --live: #F5B84E;
  --ok: #4DD07A;
  --danger: #FF6B6B;

  /* spacing scale, 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* radii */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* elevation: a hairline and an inner highlight, never a grey blur */
  --edge: 1px solid var(--line);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .04);
  --glow: 0 18px 40px -24px rgba(155, 107, 222, .45);
  --ring: 0 0 0 3px rgba(155, 107, 222, .35);

  --wrap: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Readex Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Tahoma, sans-serif;
  font-size: 15.5px;
  line-height: 1.9;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Latin names and numbers keep their own direction inside Arabic text. */
bdi, .ltr { direction: ltr; unicode-bidi: isolate; }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4); }
.stack > * + * { margin-top: var(--s4); }

.display { font-size: clamp(30px, 7.5vw, 56px); line-height: 1.15; font-weight: 700; }
.h1 { font-size: clamp(23px, 4.5vw, 34px); font-weight: 600; }
.h2 { font-size: 20px; line-height: 1.35; font-weight: 600; }
.lead { font-size: clamp(16px, 2.4vw, 19px); line-height: 1.85; color: var(--muted); }
.small { font-size: 13px; line-height: 1.7; }
.micro {
  font-size: 11.5px; line-height: 1.5; letter-spacing: .02em;
  color: var(--faint); text-transform: none;
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 13px 22px; border-radius: var(--r-md); border: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
/* Black on violet: 4.7:1, where white would only reach 3.75:1. */
.btn-primary { background: var(--violet); color: #0E0F13; }
.btn-primary:hover { background: #AE83E8; }
.btn-ghost { background: transparent; color: var(--text); border: var(--edge); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn-quiet { background: var(--surface2); color: var(--text); }
.btn-quiet:hover { background: #242833; }
.btn-sm { padding: 9px 14px; font-size: 13.5px; border-radius: var(--r-sm); }

/* ---------------- surfaces ---------------- */
.card {
  background: var(--surface);
  border: var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: var(--s5);
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--violet-t); color: var(--violet);
  font-size: 12.5px; font-weight: 500;
}
.chip.mint { background: rgba(70, 224, 192, .12); color: var(--mint); }

.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(77, 208, 122, .18);
}
.dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(245, 184, 78, .18); }

/* ---------------- the orbit mark ---------------- */
.mark { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.mark svg { width: 26px; height: 26px; flex: 0 0 auto; }

/* ---------------- header / footer ---------------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav .bar {
  display: flex; align-items: center; gap: var(--s4);
  height: 62px;
}
.nav .links { display: none; gap: var(--s5); margin-inline-start: auto; color: var(--muted); }
.nav .links a:hover { color: var(--text); }
.nav .cta { margin-inline-start: auto; }
.nav .links + .cta { margin-inline-start: 0; }

.foot {
  border-top: var(--edge); margin-top: var(--s9);
  padding-block: var(--s6) var(--s7); color: var(--muted);
}
.foot .row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.foot .row > a { padding: 8px 4px; }
.foot a:hover { color: var(--text); }

/* an arc instead of a straight rule between sections */
.arc { display: block; width: 100%; height: 40px; opacity: .5; }

@media (min-width: 860px) {
  .nav .links { display: flex; }
}

/* ---------------- motion ---------------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

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