/* Phase 50A — Global marketing primitives.
   These classes are shared across the marketing layout AND individual public pages
   (homepage, pricing, etc.). They live in a GLOBAL stylesheet rather than Blazor
   scoped CSS because scoped CSS only styles elements rendered by its own component,
   and these primitives (buttons, brand, container) are reused across components.
   Backgrounds use !important to defeat the global div/section reset in app.css. */

.mkt-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ── Brand ──────────────────────────────────────────────── */
.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--fo-text-primary, #f1f5f9);
}

.mkt-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important;
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.45);
}

.mkt-brand-word { color: var(--fo-text-primary, #f1f5f9); }
.mkt-brand-word-accent { color: var(--fo-blue, #0ea5e9); }

/* ── Nav links ──────────────────────────────────────────── */
.mkt-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.mkt-nav-link {
    color: var(--fo-text-secondary, #94a3b8);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.mkt-nav-link:hover { color: var(--fo-text-primary, #f1f5f9); }

/* ── Buttons ────────────────────────────────────────────── */
.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.mkt-btn:hover { transform: translateY(-1px); }

.mkt-btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35);
}

.mkt-btn-ghost {
    background: transparent !important;
    color: var(--fo-text-primary, #f1f5f9) !important;
    border-color: var(--fo-border, #334155);
}

.mkt-btn-ghost:hover { border-color: var(--fo-blue, #0ea5e9); }

.home-cta-soon {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 860px) {
    .mkt-nav { display: none; }
}