* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 20% 20%,
            #242424 0,
            transparent 35%
        ),
        #0d0d0d;

    color: #f5f5f5;
}

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 8vw;
}

.content {
    max-width: 900px;
}

.brand {
    margin: 0 0 32px;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.25em;

    color: #888;
}

h1 {
    margin: 0;

    font-size: clamp(64px, 10vw, 150px);
    line-height: 0.9;

    letter-spacing: -0.06em;
}

.description {
    margin: 42px 0 0;

    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.5;

    color: #aaa;
}

.status {
    margin-top: 52px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 14px;

    color: #777;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #67d86f;

    box-shadow: 0 0 12px rgba(103, 216, 111, 0.5);
}