/* ==========================================================
   Horus website — shared styles for both directions
   ========================================================== */
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--fg-1); font-family: var(--font-body); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-body); font-size: 14px; font-weight: 600; border-radius: 999px; border: 1px solid transparent; padding: 11px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 200ms var(--ease-out); text-decoration: none; white-space: nowrap; }
.btn.primary { background: var(--neutral-900); color: #fff; }
.btn.primary:hover { background: var(--horus-indigo); transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn.indigo { background: var(--horus-indigo); color: #fff; }
.btn.indigo:hover { background: var(--horus-indigo-700); transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn.secondary { background: transparent; color: var(--fg-1); border-color: var(--neutral-300); }
.btn.secondary:hover { background: var(--neutral-50); border-color: var(--neutral-900); }
.btn.ghost { background: transparent; color: var(--fg-1); padding: 11px 14px; }
.btn.ghost:hover { color: var(--horus-indigo); }
.btn.lg { padding: 16px 28px; font-size: 15px; }
.btn.xl { padding: 20px 36px; font-size: 16px; border-radius: 999px; }
.btn .arrow { transition: transform 200ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.num-tab { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow-mono { font-family: var(--font-mono); font-size: 18px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; }

/* Reveal animations (used by both directions) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }