/* /Components/Pages/Home.razor.rz.scp.css */
/* Scoped CSS for Home.razor — Blazor compiles this into a per-component
   stylesheet with build-time attribute scoping, so changes always bust the
   browser cache and the marketing landing's styling stays independent of
   the Radzen theme variables (which only apply to the authenticated app
   surface).

   Colours hardcoded rather than referencing var(--rz-*) — the landing is
   public-facing and shouldn't depend on the rest of the app's theme being
   loaded; we want the page to render correctly even before the Blazor
   circuit connects. */

.landing[b-9cst0ur8o6] {
    min-height: 100vh;
    background: linear-gradient(180deg, #1a1f2e 0%, #0f1320 100%);
    color: #e8eaed;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

.landing-nav[b-9cst0ur8o6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2.5rem;
}

.landing-brand[b-9cst0ur8o6] {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.landing-nav-actions[b-9cst0ur8o6] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.landing-nav-link[b-9cst0ur8o6] {
    color: #b0b6c2;
    text-decoration: none;
    font-size: 0.95rem;
}

.landing-nav-link:hover[b-9cst0ur8o6] {
    color: #ffffff;
}

.landing-lang[b-9cst0ur8o6] {
    display: flex;
    gap: 0.5rem;
    margin-right: 0.5rem;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-lang-link[b-9cst0ur8o6] {
    color: #7a8290;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 120ms ease, background-color 120ms ease;
}

.landing-lang-link:hover[b-9cst0ur8o6] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.landing-lang-link-active[b-9cst0ur8o6] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.landing-hero[b-9cst0ur8o6] {
    display: flex;
    justify-content: center;
    padding: 5rem 2rem 4rem;
}

.landing-hero-content[b-9cst0ur8o6] {
    max-width: 720px;
    text-align: center;
}

.landing-hero-title[b-9cst0ur8o6] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 1.25rem;
    color: #ffffff;
}

.landing-hero-subtitle[b-9cst0ur8o6] {
    font-size: 1.25rem;
    color: #b0b6c2;
    margin: 0 0 2rem;
    line-height: 1.5;
}

.landing-hero-cta[b-9cst0ur8o6] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.landing-hero-note[b-9cst0ur8o6] {
    font-size: 0.875rem;
    color: #7a8290;
    margin: 0;
}

.landing-features[b-9cst0ur8o6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 3rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.landing-feature[b-9cst0ur8o6] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.5rem;
}

.landing-feature-icon[b-9cst0ur8o6] {
    color: #d77361;
    font-size: 2rem !important;
    display: block;
    margin-bottom: 0.75rem;
}

.landing-feature h3[b-9cst0ur8o6] {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: #ffffff;
    font-weight: 600;
}

.landing-feature p[b-9cst0ur8o6] {
    margin: 0;
    color: #b0b6c2;
    font-size: 0.95rem;
    line-height: 1.5;
}

.landing-pricing[b-9cst0ur8o6] {
    padding: 3rem 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.landing-pricing h2[b-9cst0ur8o6] {
    text-align: center;
    font-size: 1.75rem;
    margin: 0 0 2rem;
    color: #ffffff;
    font-weight: 600;
}

.landing-pricing-tiers[b-9cst0ur8o6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.landing-tier[b-9cst0ur8o6] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 2rem;
}

.landing-tier-featured[b-9cst0ur8o6] {
    border-color: #d77361;
    box-shadow: 0 0 0 1px #d77361;
}

.landing-tier h3[b-9cst0ur8o6] {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: #ffffff;
    font-weight: 600;
}

.landing-tier-tagline[b-9cst0ur8o6] {
    color: #b0b6c2;
    margin: 0 0 1rem;
}

.landing-tier ul[b-9cst0ur8o6] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-tier li[b-9cst0ur8o6] {
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
    color: #b0b6c2;
}

.landing-tier li[b-9cst0ur8o6]::before {
    content: "✓";
    color: #4ade80;
    position: absolute;
    left: 0;
    font-weight: 700;
}

.landing-footer[b-9cst0ur8o6] {
    margin-top: auto;
    padding: 1.5rem 2.5rem;
    text-align: center;
    color: #7a8290;
    font-size: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}