/* Shared base for the four homepage mock-ups: Monolith's real tokens and type (site/src/core/tokens.ts). */
@import url("fonts/plex.css");
@font-face { font-family: "Kawkab Mono"; src: url("fonts/KawkabMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kawkab Mono"; src: url("fonts/KawkabMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --off: #0D0D0C; --panel: #161615; --panel2: #1E1E1C; --on: #F1EEE4; --soft: #C9C6BC; --steel: #9C9A93; --dim: #83817A;
  --line: rgba(241, 238, 228, .12); --ink: #3A3935; --ink-soft: #57554F;
  --accent: #3D5BFF; --on-accent: #FFFFFF;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --gl: max(20px, env(safe-area-inset-left, 0px)); --gr: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
html[lang="ar"] { --mono: "Kawkab Mono", "IBM Plex Sans Arabic", monospace; --sans: "IBM Plex Sans Arabic", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); background: var(--off); color: var(--on); -webkit-font-smoothing: antialiased; }
html[lang="en"] [lang="ar"], html[lang="ar"] [lang="en"] { display: none !important; }
a { color: inherit; }
.wrap { padding-left: var(--gl); padding-right: var(--gr); max-width: 1320px; margin: 0 auto; }
.mono { font-family: var(--mono); }
.caret { display: inline-block; width: .5em; height: .9em; background: var(--accent); vertical-align: -.08em; margin-inline-start: .12em; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } * { transition: none !important; animation-duration: .01ms !important; } }

/* Header shared by every mock */
.nav { display: flex; align-items: center; gap: 22px; height: 64px; font-size: 13px; }
.nav .logo { height: 17px; width: auto; display: block; }
.nav .links { display: flex; gap: 22px; margin-inline-start: auto; color: var(--soft); }
.nav .links a { text-decoration: none; }
.nav .lang { font-family: var(--sans); background: none; border: 1px solid var(--line); color: inherit; border-radius: 3px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.btn { display: inline-flex; align-items: center; gap: .1em; font-family: var(--mono); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--accent); color: var(--on-accent); padding: 12px 16px; border-radius: 2px; border: 0; cursor: pointer; white-space: nowrap; }
.btn .caret { background: currentColor; }
.btn.ghost { background: none; color: inherit; border: 1px solid var(--line); }
@media (max-width: 760px) {
  .nav .links { display: none; }
  .nav .lang { margin-inline-start: auto; }
  .nav .btn { padding: 9px 12px; font-size: 12px; }
}
.note { font: 11px/1.4 var(--mono); color: var(--dim); letter-spacing: .02em; }