/* ═══════════════════════════════════════════════════════════════════════
   The Zora site shell.

   The public pages that are not the authored landing document — the command
   library, the status board, premium, support, the changelog and the terms —
   all wear the same clothes: the page black, the cool chrome white, the violet
   the scene is regraded to, and the authored face (Onest, served by the landing
   page's own fonts.css). They read as chapters of the same site rather than as
   dashboard pages, so the bar, the brand, the buttons, the hero and the foot
   live here once and every page links this file first.

   Grep for `--z-` to retune the whole site in one place.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --z-ink: #05070a;
    --z-ink-2: #0a0e12;
    --z-panel: #0b1017;
    --z-bone: #e8ecf5;
    --z-bone-dim: #aab2c8;
    --z-muted: #7d8496;
    --z-line: rgba(232, 236, 245, 0.13);
    --z-line-soft: rgba(232, 236, 245, 0.07);
    --z-accent: #8c5cff;
    --z-ember: #b79bff;
    --z-ok: #4fd18b;
    --z-warn: #e6b450;
    --z-bad: #e0575f;
    --z-pad: clamp(20px, 3.4vw, 56px);
    --z-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --z-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --z-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

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

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

body {
    margin: 0;
    background: var(--z-ink);
    background-image: radial-gradient(72% 42% at 50% 0%, rgba(140, 92, 255, 0.13), transparent 72%);
    background-repeat: no-repeat;
    color: var(--z-bone);
    font-family: 'Onest', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.1;
}

p {
    margin: 0;
}

code {
    font-family: var(--z-mono);
    font-size: 0.94em;
}

a {
    color: inherit;
}

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

.z-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: var(--z-ink-2);
    border: 1px solid var(--z-line);
    border-radius: 0 0 10px 0;
    z-index: 40;
}

.z-skip:focus {
    left: 0;
}

.z-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--z-pad);
}

/* ── the bar ───────────────────────────────────────────────────────────── */

.z-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 34px);
    padding: 16px var(--z-pad);
    background: rgba(5, 7, 10, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--z-line-soft);
}

.z-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    text-decoration: none;
}

.z-brand svg {
    width: 34px;
    height: 34px;
    display: block;
}

.z-brand__tx {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
}

.z-brand__tx b {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.26em;
}

.z-brand__tx i {
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.34em;
    color: var(--z-muted);
}

.z-bar__links {
    display: flex;
    gap: clamp(14px, 2.2vw, 32px);
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--z-bone-dim);
}

.z-bar__links a {
    text-decoration: none;
    transition: color 0.35s var(--z-ease);
}

.z-bar__links a:hover,
.z-bar__links a[aria-current='page'] {
    color: var(--z-bone);
}

.z-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--z-line);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--z-bone-dim);
    transition: color 0.4s var(--z-ease), border-color 0.4s var(--z-ease), background 0.4s var(--z-ease);
}

.z-btn:hover {
    color: var(--z-bone);
    border-color: rgba(140, 92, 255, 0.52);
    background: rgba(140, 92, 255, 0.09);
}

.z-btn--solid {
    color: #fff;
    background: var(--z-accent);
    border-color: var(--z-accent);
}

.z-btn--solid:hover {
    color: #fff;
    background: #9b71ff;
    border-color: #9b71ff;
}

/* ── the hero ──────────────────────────────────────────────────────────── */

.z-hero {
    padding: clamp(56px, 9vh, 108px) 0 clamp(28px, 4vh, 44px);
}

.z-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--z-bone-dim);
}

.z-eyebrow span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--z-accent);
    box-shadow: 0 0 10px var(--z-accent);
}

.z-hero h1 {
    margin: 18px 0 0;
    font-size: clamp(34px, 5.4vw, 68px);
}

.z-hero h1 em {
    font-style: normal;
    color: var(--z-ember);
}

.z-hero__lead {
    max-width: 620px;
    margin-top: 18px;
    font-size: clamp(15px, 1.1vw, 17px);
    color: var(--z-bone-dim);
}

.z-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin-top: 30px;
}

.z-stats div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.z-stats b {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--z-bone);
}

.z-stats span {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--z-muted);
}

/* ── the closing call and the foot ─────────────────────────────────────── */

.z-close {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: clamp(40px, 6vh, 72px) 0;
    border-top: 1px solid var(--z-line-soft);
}

.z-close p {
    margin-right: auto;
    color: var(--z-bone-dim);
}

.z-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    padding: 34px 0 60px;
    border-top: 1px solid var(--z-line-soft);
    font-size: 12px;
    color: var(--z-muted);
}

.z-foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
}

.z-foot a {
    text-decoration: none;
    transition: color 0.3s var(--z-ease);
}

.z-foot a:hover {
    color: var(--z-bone);
}

.z-foot__mark {
    margin-left: auto;
}

/* ── narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .z-bar__links {
        display: none;
    }
}

@media (max-width: 720px) {
    .z-brand__tx i {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}