/* PRJ-104 — Baobab marketing landing page (public route: '/').
   Layout/section/nav rules only; colors come from the --v-* tokens defined
   in static/css/main.css (loaded alongside this file), per the design
   handoff's own "never hardcode hex" note. Tokens below are landing-page-
   specific values straight from that handoff's own Design Tokens section
   (Grey 500 muted text, gold hover/active tints) that don't already exist
   as --v-* app-wide tokens -- defined once here, referenced everywhere else. */
:root {
    --landing-grey-500: #ADB5BD;
    --landing-gold-hover: #E0C284;
    --landing-gold-active: #BF9A52;
}

html.landing-page, body.landing-page {
    margin: 0;
    background: var(--v-charcoal);
    color: var(--v-off-white);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.landing-page a {
    color: var(--v-off-white);
}
body.landing-page a:hover {
    color: var(--v-gold);
}
body.landing-page ::selection {
    background: var(--v-gold-light);
}
body.landing-page button:focus-visible {
    outline: 2px solid var(--v-gold);
    outline-offset: 3px;
}

@keyframes landing-cue {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(8px); opacity: 1; }
}

.landing-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 24px clamp(20px, 4vw, 56px);
}

.landing-wordmark {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--v-gold);
    text-transform: uppercase;
    margin-right: 12px;
}

.landing-btn-login {
    background: transparent;
    color: var(--v-off-white);
    border: 1px solid rgba(212, 176, 104, 0.45);
    border-radius: 8px;
    padding: 13px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background .3s, border-color .3s;
    white-space: nowrap;
}
.landing-btn-login:hover {
    background: var(--v-gold-light);
    border-color: var(--v-gold);
    color: var(--v-off-white);
}

.landing-btn-signup {
    background: var(--v-gold);
    color: var(--v-charcoal);
    border: 0;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px;
    padding: 14px 28px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.35);
    transition: background .3s;
}
.landing-btn-signup:hover { background: var(--landing-gold-hover); color: var(--v-charcoal); }
.landing-btn-signup:active { background: var(--landing-gold-active); }

.landing-tree-circle {
    position: fixed;
    top: 50vh; left: 0;
    width: 110vh; height: 110vh;
    margin-top: -55vh; margin-left: -55vh;
    z-index: 0;
    will-change: transform;
}
.landing-tree-circle svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
}
.landing-tree-mask {
    position: absolute; inset: 0;
    border-radius: 50%;
    overflow: hidden;
}
.landing-tree-mask img {
    position: absolute;
    width: 204%; left: -52%; top: -35.7%;
    max-width: none;
    display: block;
    filter: brightness(1.06);
}

.landing-main {
    position: relative;
    z-index: 1;
}

.landing-section {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 55vh minmax(0, 1fr);
    align-items: center;
    padding: 0 clamp(20px, 4vw, 56px);
    box-sizing: border-box;
}

.landing-section-content {
    padding-left: clamp(32px, 8vw, 140px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.landing-section-content--body {
    gap: 16px;
    border-top: 1px solid rgba(212, 176, 104, 0.35);
    padding-top: 28px;
}

.landing-h1 {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: clamp(48px, 7vw, 112px);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-gold);
    margin: 0;
}
.landing-sub {
    font-size: 17px;
    line-height: 28px;
    margin: 0;
    max-width: 36ch;
    color: var(--landing-grey-500);
}
.landing-kicker {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-gold);
}
.landing-h2 {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.2;
    margin: 0;
}
.landing-h2--close {
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.15;
}
.landing-body {
    font-size: 17px;
    line-height: 28px;
    margin: 0;
    max-width: 44ch;
    color: var(--landing-grey-500);
}

.landing-nav {
    position: fixed;
    bottom: 32px;
    right: clamp(20px, 4vw, 56px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--landing-grey-500);
}
.landing-nav-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: transparent;
    color: var(--v-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s, background .3s;
}
.landing-nav-arrow:hover { background: var(--v-gold-light); }
.landing-nav-up { border: 1px solid rgba(212, 176, 104, 0.45); }
.landing-nav-down { border: 1px solid var(--v-gold); }
.landing-nav-down svg { animation: landing-cue 2.4s ease-in-out infinite; }
.landing-nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.landing-nav-counter {
    font-feature-settings: 'tnum' 1;
}

@media (prefers-reduced-motion: reduce) {
    .landing-nav-down svg { animation: none; }
}