@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
    --ne-ink-950: #0b1726;
    --ne-ink-900: #13263b;
    --ne-ink-700: #36506b;
    --ne-ink-600: #53708a;
    --ne-paper: #ffffff;
    --ne-mist-100: #eff5f8;
    --ne-mist-200: #dce8ef;
    --ne-ocean-500: #1473e6;
    --ne-ocean-600: #0c5ec0;
    --ne-mint-300: #8fe6d2;
    --ne-sun-300: #f8ce74;
    --ne-success-500: #0f9f6e;
    --ne-shadow-soft: 0 18px 40px rgba(19, 38, 59, 0.09);
    --ne-shadow-surface: 0 30px 80px rgba(11, 23, 38, 0.13);
    --ne-radius-xl: 30px;
    --ne-radius-lg: 22px;
    --ne-radius-md: 16px;
    --ne-transition: 180ms ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", "Segoe UI", sans-serif !important;
    color: var(--ne-ink-950) !important;
    background:
        radial-gradient(circle at top left, rgba(143, 230, 210, 0.20), transparent 26%),
        radial-gradient(circle at top right, rgba(248, 206, 116, 0.16), transparent 24%),
        linear-gradient(180deg, #f7fbfd 0%, #edf4f8 44%, #f9f7f2 100%) !important;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.section-title, .hero-title, .page-title {
    font-family: "Space Grotesk", "Manrope", sans-serif !important;
    letter-spacing: -0.04em;
    color: var(--ne-ink-950);
}

p, li, span, label, input, select, textarea, button, a {
    font-family: "Manrope", "Segoe UI", sans-serif;
}

.container {
    max-width: 1200px !important;
}

.card,
.main-card,
.side-card,
.similar-card,
.login-container,
.login-card,
.portal-card,
.audience-card,
.feature-card,
.benefit-card,
.proof-card,
.listing-card,
.agent-card,
.contact-method,
.contact-form,
.faq-item,
.faq-card,
.support-category,
.support-article,
.doc-card,
.career-card,
.story-card,
.value-card,
.team-card,
.top-prop-item {
    border-radius: var(--ne-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--ne-shadow-soft) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px);
}

.hero,
.hero-section,
.hero-banner,
.hero-shell,
.hero-card,
.top-nav {
    border-radius: var(--ne-radius-xl) !important;
}

.btn,
button.btn,
.btn-login,
.btn-view,
.contact-btn,
.share-btn,
.login-button,
.btn-primary,
.btn-outline,
.btn-outline-gradient {
    border-radius: 999px !important;
    font-weight: 800 !important;
    transition: transform var(--ne-transition), box-shadow var(--ne-transition), background var(--ne-transition) !important;
}

.btn:hover,
button.btn:hover,
.btn-login:hover,
.btn-view:hover,
.contact-btn:hover,
.share-btn:hover,
.login-button:hover {
    transform: translateY(-1px);
}

input,
select,
textarea,
.form-control,
.form-select {
    border-radius: var(--ne-radius-md) !important;
}

.badge,
.status-badge,
.meta-pill,
.trust-pill,
.pill {
    border-radius: 999px !important;
}

.section-kicker,
.eyebrow,
.eyebrow-dot {
    letter-spacing: 0.12em;
}

.page-shell,
.portal-shell,
main {
    position: relative;
}

@media (max-width: 768px) {
    .container {
        max-width: calc(100% - 24px) !important;
    }
}