:root {
    --color-void: #060913;
    --color-panel: #0c1222;
    --color-blurple: #5865f2;
    --color-blurple-soft: #8891ff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-void);
    color: #e8ecf6;
    font-family: var(--font-cascadia), ui-monospace, SFMono-Regular, Menlo, monospace;
    min-height: 100vh;
}

.stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.kicker {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-blurple-soft);
}

.title {
    margin: 0;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
}

.accent {
    color: var(--color-blurple);
}

.sub {
    margin: 0;
    color: #a1a1aa;
}

.foot {
    margin: 0;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    color: #71717a;
}

.foot a {
    color: var(--color-blurple-soft);
    text-decoration: none;
}

.foot a:hover {
    color: #fff;
}