/*
 * Public home / hero (WP9; UI-Design-Principles Sec. 12). The dark theme at its most
 * atmospheric — not a separate design. Wordmark, hero statement, login/invite entry,
 * footer with legal + language.
 *
 * Class schema: gtx-home, gtx-home__topbar, gtx-home__hero, gtx-home__title,
 * gtx-home__lede, gtx-home__cta, gtx-home__section, gtx-home__footer.
 */

.gtx-home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(232, 134, 46, 0.10), transparent 60%),
        var(--gtx-bg);
}

.gtx-home__topbar {
    display: flex;
    align-items: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s4) var(--gtx-s5);
}

.gtx-home__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--gtx-font-display);
    font-weight: 700;
    font-size: var(--gtx-fs-h3);
    color: var(--gtx-text);
    text-decoration: none;
}

.gtx-home__hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gtx-s4);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: var(--gtx-s8) var(--gtx-s5);
}

.gtx-home__title {
    font-family: var(--gtx-font-display);
    font-weight: 700;
    font-size: var(--gtx-fs-hero);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.gtx-home__title .gtx-brand__dot {
    color: var(--gtx-ember);
}

.gtx-home__lede {
    max-width: 46ch;
    font-size: var(--gtx-fs-h3);
    color: var(--gtx-text-dim);
    line-height: 1.4;
}

.gtx-home__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s3);
    margin-top: var(--gtx-s3);
}

.gtx-home__section {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gtx-s5) var(--gtx-s7);
}

.gtx-home__footer {
    border-top: 1px solid var(--gtx-line);
    padding: var(--gtx-s4) var(--gtx-s5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gtx-s3);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
}

.gtx-home__footer .gtx-topbar__spacer {
    flex: 1 1 auto;
}

@media (max-width: 639px) {
    .gtx-home__title {
        font-size: var(--gtx-fs-h1);
    }
}