/* Shared top navigation baseline for public-facing pages. */

body {
    background:
        radial-gradient(circle at top left, rgba(0, 102, 255, 0.08), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(0, 102, 255, 0.05), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--navy, #0a192f);
}

h1,
h2,
h3,
h4 {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: -0.04em !important;
}

.hero.hero--home,
.hero.hero--feature,
.hero-card.hero--feature-card,
.hero-shell.hero--feature-shell,
.blog-hero.hero--blog,
.tour-container.hero--demo,
.welcome-container.hero--demo {
    position: relative !important;
    isolation: isolate;
}

.hero.hero--home {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 120px 20px 100px !important;
    text-align: center !important;
    background: radial-gradient(circle at 50% 0%, #e0f0ff 0%, rgba(248, 250, 252, 1) 72%) !important;
}

.hero.hero--feature {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 96px 20px 72px !important;
    text-align: center !important;
    background: radial-gradient(circle at 50% 0%, rgba(224, 240, 255, 0.9) 0%, rgba(248, 250, 252, 1) 72%) !important;
}

.hero.hero--feature h1,
.hero.hero--home h1 {
    text-wrap: balance;
}

.hero-shell.hero--feature-shell {
    background: linear-gradient(135deg, #0b1630 0%, #10315c 54%, #0066ff 100%) !important;
    border-radius: 42px !important;
    box-shadow: 0 28px 70px rgba(10,25,47,0.18) !important;
}

.hero-card.hero--feature-card {
    background: linear-gradient(135deg, rgba(10,25,47,0.98), rgba(0,102,255,0.92)) !important;
    border-radius: 30px !important;
    box-shadow: 0 24px 50px rgba(10,25,47,0.18) !important;
}

.blog-hero.hero--blog {
    max-width: 800px !important;
    margin: 64px auto 40px !important;
    padding: 0 20px !important;
    text-align: center !important;
}

.blog-hero.hero--blog h1 {
    text-wrap: balance;
}

.tour-container.hero--demo,
.welcome-container.hero--demo {
    background: rgba(255,255,255,0.94) !important;
    border-radius: 40px !important;
    box-shadow: 0 25px 50px -12px rgba(10,25,47,0.08) !important;
    border: 1px solid rgba(226, 232, 240, 1) !important;
}

.site-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 5% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.site-logo {
    color: var(--navy, #0a192f) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    letter-spacing: -1px !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    flex-shrink: 0 !important;
}

.site-logo span {
    color: var(--blue, #0066ff) !important;
}

.site-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.site-nav-links a {
    text-decoration: none !important;
    color: var(--navy, #0a192f) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.site-nav-links a:hover {
    color: var(--blue, #0066ff) !important;
}

.site-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-weight: 800 !important;
    border: 1px solid transparent !important;
}

.site-btn-outline {
    background: transparent !important;
    color: var(--navy, #0a192f) !important;
    border-color: rgba(15, 23, 42, 0.22) !important;
}

.site-btn-primary {
    background: var(--blue, #0066ff) !important;
    color: #ffffff !important;
    border-color: var(--blue, #0066ff) !important;
}

.site-btn-outline:hover,
.site-btn-primary:hover {
    border-color: var(--blue, #0066ff) !important;
}

nav,
.nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 5% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

nav .logo,
nav .nav-logo,
nav .brand,
.nav .logo,
.nav .nav-logo,
.nav .brand {
    color: var(--navy, #0a192f) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    letter-spacing: -1px !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    flex-shrink: 0 !important;
}

nav .logo span,
nav .nav-logo span,
nav .brand span,
.nav .logo span,
.nav .nav-logo span,
.nav .brand span {
    color: var(--blue, #0066ff) !important;
}

nav .nav-links,
.nav .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

nav .nav-links a,
.nav .nav-links a {
    text-decoration: none !important;
    color: var(--navy, #0a192f) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

nav .nav-links a:hover,
.nav .nav-links a:hover {
    color: var(--blue, #0066ff) !important;
}

nav .btn-nav,
nav .btn-link,
nav .btn-get-started,
nav .btn-demo,
nav .btn-primary,
nav .nav-cta,
nav .primary,
nav .btn-login,
nav .btn-outline-nav,
.nav .btn-nav,
.nav .btn-link,
.nav .btn-get-started,
.nav .btn-demo,
.nav .btn-primary,
.nav .nav-cta,
.nav .primary,
.nav .btn-login,
.nav .btn-outline-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-weight: 800 !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

nav .btn-login,
nav .btn-outline-nav,
.nav .btn-login,
.nav .btn-outline-nav {
    background: transparent !important;
    color: var(--navy, #0a192f) !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

nav .btn-nav:hover,
nav .btn-link:hover,
nav .btn-get-started:hover,
nav .btn-demo:hover,
nav .btn-primary:hover,
nav .nav-cta:hover,
nav .primary:hover,
nav .btn-login:hover,
nav .btn-outline-nav:hover,
.nav .btn-nav:hover,
.nav .btn-link:hover,
.nav .btn-get-started:hover,
.nav .btn-demo:hover,
.nav .btn-primary:hover,
.nav .nav-cta:hover,
.nav .primary:hover,
.nav .btn-login:hover,
.nav .btn-outline-nav:hover {
    border-color: var(--blue, #0066ff) !important;
}

/* Keep simple legal page secondary link consistent. */
.nav > a:not(.logo):not(.nav-logo):not(.brand) {
    text-decoration: none !important;
    font-weight: 700 !important;
    color: var(--blue, #0066ff) !important;
    font-size: 14px !important;
}

@media (max-width: 900px) {
    nav,
    .nav {
        padding: 14px 5%;
    }

    .nav-links {
        gap: 12px;
    }

    nav .logo,
    nav .nav-logo,
    nav .brand,
    .nav .logo,
    .nav .nav-logo,
    .nav .brand {
        font-size: 20px;
    }
}