.container {
    width: min(100% - 48px, var(--container-width));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;

    backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--color-border);

    z-index: 100;
}

.header-inner {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* -------------------- hero -------------------- */
.hero {
    /* min-height: calc(100vh - 72px); */
    min-height: calc(76vh - 72px);

    display: flex;
    align-items: center;
}

.hero-inner {
    /* width: 100%; */

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}

.hero-content {
    max-width: 660px;
}