/*
 * open2done landing-page styles (PRD-004 T2.6).
 *
 * Design tokens extracted verbatim from the open2done SPA theme
 * (backend/public/assets/css/spa_theme-default.css :root), so the apex page
 * matches the application look:
 *   --ha-color1        #fbc02d  -> yellow accent (CTA)        (spa_theme-default.css:8)
 *   --ha-color1__hover #ffcc00  -> accent hover               (spa_theme-default.css:9)
 *   --ha-font-color1   #5f6b79  -> body text                  (spa_theme-default.css:6)
 *   --ha-font-color2   #28323e  -> headings                   (spa_theme-default.css:7)
 *   cell-background    #ebeef1  -> surface tint                (spa_theme-default.css:55)
 *   --ha-color6        #e3e8ed  -> alt surface                 (spa_theme-default.css:18)
 *   --ha-font-family-normal "D-DIN" -> primary font            (spa_theme-default.css:4)
 *
 * The D-DIN web-font files ship with the SPA, not with this lean static page,
 * so the font stack falls back to a system sans-serif when D-DIN is absent.
 */
:root {
    --o2d-accent: #fbc02d;
    --o2d-accent-hover: #ffcc00;
    --o2d-text: #5f6b79;
    --o2d-heading: #28323e;
    --o2d-surface: #ebeef1;
    --o2d-surface-alt: #e3e8ed;
    --o2d-font: "D-DIN", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    font-family: var(--o2d-font);
    color: var(--o2d-text);
    background: linear-gradient(160deg, #ffffff 0%, var(--o2d-surface) 100%);
}

.landing {
    margin: auto;
    width: 100%;
    max-width: 48rem;
    padding: 2rem;
    text-align: center;
}

.brand__name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--o2d-heading);
    letter-spacing: 0.02em;
}

.brand__accent {
    color: var(--o2d-accent);
}

.hero__title {
    margin-top: 2.5rem;
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--o2d-heading);
}

.hero__subtitle {
    margin: 1.25rem auto 0;
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: 1.6;
}

.hero__cta {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 0.85rem 2.25rem;
    border-radius: 2rem;
    background: var(--o2d-accent);
    color: var(--o2d-heading);
    font-weight: 700;
    text-decoration: none;
    transition: background 200ms ease;
}

.hero__cta:hover {
    background: var(--o2d-accent-hover);
}

.footer {
    margin-top: 4rem;
    font-size: 0.875rem;
    color: var(--o2d-text);
    opacity: 0.7;
}