/* =========================================================
   MERIDIAN FINOPS
   GLOBAL DESIGN SYSTEM
   Professional FinTech + Modern Gen-Z SaaS
   Light / Dark / System
   ========================================================= */


/* =========================================================
   GOOGLE FONTS
   ========================================================= */

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


/* =========================================================
   ROOT DESIGN TOKENS
   ========================================================= */

:root {

    /* ---------- Core backgrounds ---------- */

    --mf-bg: #f7f9fc;

    --mf-bg-alt: #eef3f9;

    --mf-surface: #ffffff;

    --mf-surface-soft: #f8fafc;

    --mf-surface-muted: #f1f5f9;


    /* ---------- Text ---------- */

    --mf-text: #0f172a;

    --mf-text-soft: #334155;

    --mf-text-muted: #64748b;

    --mf-text-faint: #94a3b8;


    /* ---------- Borders ---------- */

    --mf-border: #e2e8f0;

    --mf-border-strong: #cbd5e1;


    /* ---------- Brand ---------- */

    --mf-blue: #2563eb;

    --mf-blue-dark: #1d4ed8;

    --mf-blue-soft: #eff6ff;

    --mf-cyan: #06b6d4;

    --mf-cyan-soft: #ecfeff;

    --mf-violet: #7c3aed;

    --mf-violet-soft: #f5f3ff;


    /* ---------- Semantic ---------- */

    --mf-success: #10b981;

    --mf-success-soft: #ecfdf5;

    --mf-warning: #f59e0b;

    --mf-warning-soft: #fffbeb;

    --mf-danger: #f43f5e;

    --mf-danger-soft: #fff1f2;


    /* ---------- Shadows ---------- */

    --mf-shadow-sm:
        0 5px 15px
        rgba(15, 23, 42, 0.06);

    --mf-shadow:
        0 15px 40px
        rgba(15, 23, 42, 0.08);

    --mf-shadow-lg:
        0 25px 70px
        rgba(15, 23, 42, 0.14);


    /* ---------- Radius ---------- */

    --mf-radius-sm: 10px;

    --mf-radius: 16px;

    --mf-radius-lg: 22px;

    --mf-radius-xl: 28px;


    /* ---------- Transitions ---------- */

    --mf-fast: 0.18s ease;

    --mf-normal: 0.3s ease;

}


/* =========================================================
   DARK THEME
   ========================================================= */

[data-theme="dark"] {

    --mf-bg: #070b14;

    --mf-bg-alt: #0a1020;

    --mf-surface: #0f172a;

    --mf-surface-soft: #111c2e;

    --mf-surface-muted: #172235;


    --mf-text: #f8fafc;

    --mf-text-soft: #e2e8f0;

    --mf-text-muted: #94a3b8;

    --mf-text-faint: #64748b;


    --mf-border: #1e293b;

    --mf-border-strong: #334155;


    --mf-blue: #60a5fa;

    --mf-blue-dark: #3b82f6;

    --mf-blue-soft: #172554;

    --mf-cyan: #22d3ee;

    --mf-cyan-soft: #083344;

    --mf-violet: #a78bfa;

    --mf-violet-soft: #2e1065;


    --mf-success: #34d399;

    --mf-success-soft: #052e25;

    --mf-warning: #fbbf24;

    --mf-warning-soft: #3b2700;

    --mf-danger: #fb7185;

    --mf-danger-soft: #450a0a;


    --mf-shadow-sm:
        0 8px 20px
        rgba(0, 0, 0, 0.22);

    --mf-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.30);

    --mf-shadow-lg:
        0 30px 80px
        rgba(0, 0, 0, 0.40);

}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--mf-bg);

    color:
        var(--mf-text);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        "Space Grotesk",
        "Inter",
        sans-serif;

}


button,
input,
select,
textarea {

    font-family:
        "Inter",
        sans-serif;

}


a {

    transition:
        color var(--mf-fast),
        background-color var(--mf-fast),
        border-color var(--mf-fast),
        transform var(--mf-fast);

}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 25px;

    padding:
        16px
        42px;

    background:
        linear-gradient(
            135deg,
            #0b1220,
            #172554
        );

    color: white;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:
        0 10px 35px
        rgba(15, 23, 42, 0.12);

}


.brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 26px;

    font-weight: 700;

    letter-spacing: -0.04em;

    white-space: nowrap;

}


/* ---------- Navigation ---------- */

.main-nav {

    display: flex;

    gap: 24px;

    align-items: center;

}


nav {

    display: flex;

    gap: 24px;

}


.main-nav a,
nav a {

    color: rgba(255, 255, 255, 0.86);

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

}


.main-nav a:hover,
nav a:hover {

    color: white;

    transform:
        translateY(-1px);

}


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.page-wrap {

    width: min(
        1400px,
        calc(100% - 48px)
    );

    margin:
        0 auto;

    padding:
        42px 0
        70px;

}


.section-header {

    margin-bottom: 34px;

}


.eyebrow {

    margin: 0 0 10px;

    color:
        var(--mf-blue);

    text-transform: uppercase;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.section-header h1 {

    margin:
        0 0 10px;

    font-size:
        clamp(
            40px,
            6vw,
            68px
        );

    line-height: 0.98;

    letter-spacing:
        -0.055em;

    color:
        var(--mf-text);

}


.section-header p:last-child {

    color:
        var(--mf-text-muted);

    font-size: 17px;

}


/* =========================================================
   GRID SYSTEM
   ========================================================= */

.info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    margin-bottom: 26px;

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 22px;

    margin-bottom: 30px;

}


/* =========================================================
   INFO / STAT CARDS
   ========================================================= */

.info-card,
.stat-card {

    position: relative;

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-lg);

    padding:
        26px;

    box-shadow:
        var(--mf-shadow-sm);

    overflow: hidden;

    transition:
        transform var(--mf-normal),
        box-shadow var(--mf-normal),
        border-color var(--mf-normal),
        background-color var(--mf-normal);

}


.info-card::before,
.stat-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--mf-blue),
            var(--mf-cyan),
            var(--mf-violet)
        );

    opacity: 0.85;

}


.info-card:hover,
.stat-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--mf-shadow);

    border-color:
        color-mix(
            in srgb,
            var(--mf-blue) 35%,
            var(--mf-border)
        );

}


.info-card h3 {

    margin:
        0 0 14px;

    color:
        var(--mf-text);

    font-size: 18px;

}


.info-card p {

    color:
        var(--mf-text-muted);

    line-height: 1.65;

}


.info-card h2,
.stat-card h2 {

    margin:
        8px 0;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        clamp(
            25px,
            3vw,
            40px
        );

    letter-spacing:
        -0.04em;

    color:
        var(--mf-text);

}


/* =========================================================
   KPI CARDS
   ========================================================= */

.dashboard-kpi-grid {

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(1)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-blue),
            var(--mf-cyan)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(2)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-success),
            var(--mf-cyan)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(3)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-warning),
            var(--mf-danger)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(4)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-violet),
            var(--mf-blue)
        );

}


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.hero-panel,
.upload-box,
.chat-box,
.report-card {

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-lg);

    padding:
        30px;

    margin-bottom:
        26px;

    box-shadow:
        var(--mf-shadow-sm);

    transition:
        background-color var(--mf-normal),
        border-color var(--mf-normal),
        box-shadow var(--mf-normal),
        transform var(--mf-normal);

}


.panel:hover,
.hero-panel:hover,
.upload-box:hover,
.report-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--mf-shadow);

}


.panel h2 {

    margin-top: 0;

    color:
        var(--mf-text);

}


/* =========================================================
   BUTTONS
   ========================================================= */

.action-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 22px;

}


.action-buttons button,
.primary-btn,
.chat-input button {

    appearance: none;

    border: none;

    border-radius:
        12px;

    padding:
        13px 20px;

    font-size: 14px;

    font-weight: 800;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--mf-blue),
            var(--mf-blue-dark)
        );

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.20);

    transition:
        transform var(--mf-fast),
        box-shadow var(--mf-fast);

}


.action-buttons button:hover,
.primary-btn:hover,
.chat-input button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(37, 99, 235, 0.28);

}


/* =========================================================
   LINKS
   ========================================================= */

.info-card a,
.panel a,
.report-card a {

    color:
        var(--mf-blue);

    font-weight:
        700;

    text-decoration:
        none;

}


.info-card a:hover,
.panel a:hover,
.report-card a:hover {

    color:
        var(--mf-violet);

}


/* =========================================================
   DASHBOARD CHARTS
   ========================================================= */

.dashboard-chart-card {

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-xl);

    padding:
        28px;

    box-shadow:
        var(--mf-shadow);

    margin-bottom:
        24px;

    transition:
        background-color var(--mf-normal),
        border-color var(--mf-normal);

}


.dashboard-chart-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        24px;

    margin-bottom:
        24px;

}


.dashboard-chart-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    margin-bottom:
        20px;

}


.chart-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--mf-blue);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;

}


.dashboard-chart-header h2 {

    margin:
        0;

    color:
        var(--mf-text);

    font-size:
        25px;

    letter-spacing:
        -0.035em;

}


.chart-range {

    color:
        var(--mf-text-muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;

}


.chart-container {

    position:
        relative;

    height:
        340px;

}


.chart-empty-state {

    padding:
        60px 20px;

    text-align:
        center;

    color:
        var(--mf-text-muted);

}


.chart-empty-state strong {

    display:
        block;

    color:
        var(--mf-text);

    margin-bottom:
        8px;

}


.chart-empty-state p {

    max-width:
        520px;

    margin:
        0 auto;

    line-height:
        1.7;

}


/* =========================================================
   ANALYSIS CHART IMAGE
   ========================================================= */

.analysis-chart {

    width: 100%;

    max-width:
        900px;

    display:
        block;

    margin:
        30px auto;

    border-radius:
        var(--mf-radius);

}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.file-input-wrap {

    border:
        2px dashed
        var(--mf-border-strong);

    padding:
        20px;

    border-radius:
        var(--mf-radius);

    background:
        var(--mf-surface-soft);

}


/* =========================================================
   CHART LIST
   ========================================================= */

.chart-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        20px;

}


.chart-item {

    background:
        var(--mf-surface);

    padding:
        20px;

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius);

    box-shadow:
        var(--mf-shadow-sm);

}


/* =========================================================
   ACCOUNT HEADER
   ========================================================= */

.account-area {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.notification-button,
.theme-button {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        white;

    cursor:
        pointer;

    transition:
        background-color var(--mf-fast),
        border-color var(--mf-fast),
        transform var(--mf-fast);

}


.notification-button:hover,
.theme-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    transform:
        translateY(-1px);

}


.notification-button {

    position:
        relative;

    font-size:
        17px;

}


.notification-badge {

    position:
        absolute;

    top:
        -4px;

    right:
        -4px;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 5px;

    border-radius:
        999px;

    background:
        var(--mf-danger);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   THEME SWITCHER
   ========================================================= */

.theme-switcher {

    display:
        flex;

    align-items:
        center;

}


/* =========================================================
   ACCOUNT BUTTON
   ========================================================= */

.account-button {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        white;

    padding:
        6px 10px;

    cursor:
        pointer;

    text-align:
        left;

}


.account-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

}


.avatar {

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dbeafe
        );

    color:
        #1d4ed8;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        800;

    flex-shrink:
        0;

}


.avatar.large {

    width:
        48px;

    height:
        48px;

    font-size:
        18px;

}


.account-text {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        125px;

}


.account-text strong {

    font-size:
        13px;

}


.account-text small {

    margin-top:
        2px;

    opacity:
        0.78;

    font-size:
        10px;

}


.account-arrow {

    font-size:
        13px;

    margin-left:
        4px;

}


/* =========================================================
   ACCOUNT / NOTIFICATION MENUS
   ========================================================= */

.account-menu,
.notification-menu {

    position:
        absolute;

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius);

    box-shadow:
        var(--mf-shadow-lg);

    display:
        none;

    z-index:
        1500;

    color:
        var(--mf-text);

}


.account-menu {

    top:
        calc(
            100% + 12px
        );

    right:
        0;

    width:
        290px;

    padding:
        10px;

}


.notification-menu {

    top:
        calc(
            100% + 12px
        );

    right:
        0;

    width:
        330px;

    padding:
        12px;

}


.account-menu.show,
.notification-menu.show {

    display:
        block;

}


.account-menu-header {

    display:
        flex;

    gap:
        12px;

    padding:
        10px;

    align-items:
        flex-start;

}


.account-menu-header > div:last-child {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


.account-menu-header strong {

    color:
        var(--mf-text);

    font-size:
        14px;

}


.account-menu-header span {

    color:
        var(--mf-text-muted);

    font-size:
        11px;

    margin-top:
        3px;

    overflow-wrap:
        anywhere;

}


.account-menu-divider {

    height:
        1px;

    background:
        var(--mf-border);

    margin:
        8px 0;

}


.account-menu a {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 12px;

    border-radius:
        10px;

    color:
        var(--mf-text-soft);

    text-decoration:
        none;

    font-weight:
        600;

    font-size:
        13px;

}


.account-menu a:hover {

    background:
        var(--mf-surface-muted);

    color:
        var(--mf-blue);

}


.account-menu
.logout-link {

    color:
        var(--mf-danger);

}


.notification-menu-title {

    font-weight:
        800;

    color:
        var(--mf-text);

    padding:
        10px;

}


.notification-item {

    padding:
        12px;

    border:
        1px solid
        var(--mf-border);

    border-radius:
        11px;

    background:
        var(--mf-surface-soft);

    margin-top:
        8px;

}


.notification-item strong {

    display:
        block;

    color:
        var(--mf-text);

    font-size:
        12px;

}


.notification-item span {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--mf-text-muted);

    font-size:
        11px;

    line-height:
        1.5;

}


.notification-empty {

    padding:
        15px;

    color:
        var(--mf-text-muted);

    font-size:
        12px;

}


/* =========================================================
   CHATBOT
   ========================================================= */

.chat-box {

    background:
        var(--mf-surface);

}


#chat-messages {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

    margin-bottom:
        25px;

    max-height:
        500px;

    overflow-y:
        auto;

    padding-right:
        10px;

}


.chat-message {

    max-width:
        75%;

    padding:
        18px 22px;

    border-radius:
        18px;

    line-height:
        1.6;

    font-size:
        15px;

    animation:
        fadeIn 0.3s ease;

}


.chat-message.bot {

    background:
        linear-gradient(
            135deg,
            var(--mf-violet-soft),
            var(--mf-blue-soft)
        );

    color:
        var(--mf-text);

    align-self:
        flex-start;

}


.chat-message.user {

    background:
        linear-gradient(
            135deg,
            var(--mf-blue),
            var(--mf-violet)
        );

    color:
        white;

    align-self:
        flex-end;

    margin-left:
        auto;

}


.quick-questions {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

    margin-top:
        20px;

}


.quick-questions button {

    background:
        var(--mf-blue-soft);

    color:
        var(--mf-blue);

    border:
        1px solid
        var(--mf-border);

    padding:
        11px 16px;

    border-radius:
        12px;

    cursor:
        pointer;

    font-weight:
        700;

}


.chat-input {

    display:
        flex;

    gap:
        12px;

    margin-top:
        24px;

}


.chat-input input {

    flex:
        1;

    padding:
        15px;

    border:
        1px solid
        var(--mf-border-strong);

    border-radius:
        12px;

    font-size:
        15px;

    outline:
        none;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

}


.chat-input input:focus {

    border-color:
        var(--mf-blue);

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.10
        );

}


@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLES
   ========================================================= */

.recommendation-table {

    width:
        100%;

    border-collapse:
        collapse;

    margin-top:
        20px;

    overflow:
        hidden;

    border-radius:
        var(--mf-radius);

}


.recommendation-table th,
.recommendation-table td {

    padding:
        15px;

    border-bottom:
        1px solid
        var(--mf-border);

    text-align:
        left;

}


.recommendation-table th {

    background:
        var(--mf-blue-soft);

    color:
        var(--mf-blue);

    font-weight:
        800;

}


.recommendation-table tr:hover {

    background:
        var(--mf-surface-soft);

}


/* =========================================================
   SCORE EXPLANATIONS
   ========================================================= */

.score-explanation-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        24px;

}


.score-explanation-grid > div {

    background:
        var(--mf-surface-soft);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        14px;

    padding:
        20px;

}


.score-explanation-grid ul {

    margin-bottom:
        0;

    padding-left:
        20px;

    line-height:
        1.8;

}


/* =========================================================
   AUTHENTICATION
   ========================================================= */

.auth-page {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(
                37,
                99,
                235,
                0.08
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(
                124,
                58,
                237,
                0.08
            ),
            transparent 28%
        ),
        var(--mf-bg);

}


.auth-card {

    width:
        100%;

    max-width:
        500px;

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-xl);

    padding:
        42px;

    box-shadow:
        var(--mf-shadow-lg);

}


.auth-brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        28px;

    font-weight:
        700;

    color:
        var(--mf-text);

    margin-bottom:
        30px;

}


.auth-card h1 {

    font-size:
        42px;

    margin:
        10px 0;

    color:
        var(--mf-text);

}


.auth-subtitle {

    color:
        var(--mf-text-muted);

    margin-bottom:
        30px;

    line-height:
        1.7;

}


.auth-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.auth-form label {

    font-weight:
        700;

    color:
        var(--mf-text-soft);

    margin-top:
        10px;

}


.auth-form input {

    width:
        100%;

    padding:
        14px 15px;

    border:
        1px solid
        var(--mf-border-strong);

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    border-radius:
        12px;

    font-size:
        15px;

    outline:
        none;

}


.auth-form input:focus {

    border-color:
        var(--mf-blue);

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.10
        );

}


.auth-submit {

    width:
        100%;

    margin-top:
        15px;

}


.auth-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        30px 0 20px;

    color:
        var(--mf-text-muted);

    font-size:
        13px;

}


.auth-divider::before,
.auth-divider::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        var(--mf-border);

}


.secondary-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    padding:
        13px 20px;

    border-radius:
        12px;

    border:
        1px solid
        var(--mf-blue);

    color:
        var(--mf-blue);

    text-decoration:
        none;

    font-weight:
        700;

}


.secondary-btn:hover {

    background:
        var(--mf-blue-soft);

}


.auth-footer {

    margin-top:
        25px;

    text-align:
        center;

    color:
        var(--mf-text-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


.auth-footer a {

    color:
        var(--mf-blue);

    text-decoration:
        none;

}


/* =========================================================
   PUBLIC LANDING PAGE
   ========================================================= */

.landing-page {

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(
                37,
                99,
                235,
                0.10
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(
                14,
                165,
                233,
                0.08
            ),
            transparent 28%
        ),
        var(--mf-bg);

}


.landing-header {

    position:
        sticky;

    top:
        0;

    z-index:
        500;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        16px 6vw;

    background:
        rgba(
            248,
            250,
            252,
            0.90
        );

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            0.20
        );

}


.landing-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #0f172a;

    text-decoration:
        none;

    font-weight:
        800;

    font-size:
        19px;

}


.landing-brand-mark {

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    color:
        white;

    font-weight:
        900;

}


.landing-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.landing-nav a {

    color:
        #475569;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

}


.landing-nav a:hover {

    color:
        #2563eb;

}


.landing-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.landing-login {

    color:
        #334155;

    text-decoration:
        none;

    font-weight:
        700;

    font-size:
        14px;

    padding:
        11px 14px;

}


.landing-cta {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;

    padding:
        12px 18px;

    border-radius:
        12px;

    box-shadow:
        0 10px 24px
        rgba(
            37,
            99,
            235,
            0.18
        );

}


/* =========================================================
   LANDING HERO
   ========================================================= */

.hero-section {

    max-width:
        1400px;

    margin:
        0 auto;

    padding:
        90px 6vw 70px;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    max-width:
        720px;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        #1d4ed8;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.5px;

    text-transform:
        uppercase;

}


.pulse-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 6px
        rgba(
            34,
            197,
            94,
            0.10
        );

}


.hero-content h1 {

    margin:
        22px 0;

    font-size:
        clamp(
            48px,
            6vw,
            82px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    color:
        #0f172a;

    max-width:
        760px;

}


.hero-copy {

    max-width:
        650px;

    font-size:
        18px;

    line-height:
        1.8;

    color:
        #64748b;

}


.hero-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;

    margin-top:
        30px;

}


.hero-primary,
.hero-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px 22px;

    border-radius:
        13px;

    text-decoration:
        none;

    font-weight:
        800;

}


.hero-primary {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 16px 35px
        rgba(
            37,
            99,
            235,
            0.20
        );

}


.hero-secondary {

    color:
        #0f172a;

    background:
        white;

    border:
        1px solid
        #dbe3ee;

}


.hero-providers {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        34px;

    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


/* =========================================================
   LANDING DASHBOARD VISUAL
   ========================================================= */

.hero-visual {

    position:
        relative;

}


.dashboard-window {

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #162033
        );

    border-radius:
        26px;

    overflow:
        hidden;

    box-shadow:
        0 30px 80px
        rgba(
            15,
            23,
            42,
            0.22
        );

    transform:
        perspective(1200px)
        rotateY(-6deg)
        rotateX(2deg);

}


.window-topbar {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        14px 18px;

    color:
        #cbd5e1;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.window-dots {

    display:
        flex;

    gap:
        6px;

}


.window-dots span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #64748b;

}


.window-title {

    font-size:
        12px;

    font-weight:
        700;

}


.mini-dashboard {

    padding:
        22px;

}


.mini-kpi-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        12px;

}


.mini-kpi {

    padding:
        16px;

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.mini-kpi span,
.mini-kpi small {

    display:
        block;

    color:
        #94a3b8;

    font-size:
        11px;

}


.mini-kpi strong {

    display:
        block;

    margin:
        7px 0;

    color:
        white;

    font-size:
        21px;

    font-family:
        "JetBrains Mono",
        monospace;

}


.mini-kpi .positive {

    color:
        #4ade80;

}


.mini-chart-card {

    margin-top:
        14px;

    padding:
        18px;

    border-radius:
        17px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.mini-card-heading {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #cbd5e1;

    font-size:
        11px;

    margin-bottom:
        18px;

}


.chart-bars {

    height:
        145px;

    display:
        flex;

    align-items:
        end;

    gap:
        9px;

}


.chart-bars span {

    flex:
        1;

    min-width:
        12px;

    border-radius:
        6px 6px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #7c3aed
        );

}


.mini-insight {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        14px;

    padding:
        14px;

    border-radius:
        15px;

    background:
        rgba(
            37,
            99,
            235,
            0.14
        );

    border:
        1px solid
        rgba(
            96,
            165,
            250,
            0.12
        );

    color:
        white;

}


.insight-icon {

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    font-weight:
        900;

}


.mini-insight strong {

    font-size:
        12px;

}


.mini-insight p {

    margin:
        3px 0 0;

    color:
        #94a3b8;

    font-size:
        11px;

}


.insight-arrow {

    margin-left:
        auto;

    color:
        #93c5fd;

    font-size:
        18px;

}


/* =========================================================
   LANDING SECTIONS
   ========================================================= */

.trust-section {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        18px 6vw 70px;

    text-align:
        center;

}


.trust-section > p {

    color:
        #94a3b8;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

}


.trust-items {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        30px;

    margin-top:
        20px;

    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.landing-section {

    max-width:
        1300px;

    margin:
        0 auto;

    padding:
        110px 6vw;

}


.section-heading {

    max-width:
        720px;

}


.section-heading.centered {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

}


.section-eyebrow {

    color:
        #2563eb;

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


.section-heading h2,
.decision-content h2,
.final-cta h2 {

    margin:
        12px 0 18px;

    font-size:
        clamp(
            34px,
            4vw,
            56px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

    color:
        #0f172a;

}


.section-heading > p:last-child,
.decision-content > p {

    color:
        #64748b;

    line-height:
        1.8;

    font-size:
        16px;

}


.feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap:
        18px;

    margin-top:
        50px;

}


.feature-card {

    grid-column:
        span 2;

    padding:
        28px;

    border-radius:
        22px;

    background:
        white;

    border:
        1px solid
        #e7edf4;

    box-shadow:
        0 15px 40px
        rgba(
            15,
            23,
            42,
            0.06
        );

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.feature-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.feature-card-large {

    grid-column:
        span 4;

    min-height:
        260px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #f5f3ff 55%,
            white 100%
        );

}


.feature-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eff6ff;

    color:
        #2563eb;

    font-weight:
        900;

    margin-bottom:
        22px;

}


.feature-card h3 {

    margin:
        0 0 10px;

    color:
        #0f172a;

    font-size:
        21px;

}


.feature-card p {

    margin:
        0;

    color:
        #64748b;

    line-height:
        1.7;

}


.feature-metric {

    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

    margin-top:
        26px;

}


.feature-metric strong {

    color:
        #2563eb;

    font-size:
        36px;

    font-family:
        "JetBrains Mono",
        monospace;

}


.feature-metric span {

    color:
        #64748b;

}


.decision-section {

    background:
        linear-gradient(
            145deg,
            #0f172a,
            #172554,
            #2e1065
        );

    color:
        white;

    padding:
        110px 6vw;

}


.decision-content {

    max-width:
        1300px;

    margin:
        0 auto;

}


.decision-content h2 {

    color:
        white;

    max-width:
        800px;

}


.decision-content > p {

    max-width:
        760px;

    color:
        #94a3b8;

}


.decision-flow {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        14px;

    margin-top:
        50px;

}


.decision-flow > div {

    padding:
        24px;

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.decision-flow span {

    display:
        block;

    color:
        #60a5fa;

    font-size:
        12px;

    font-weight:
        900;

    margin-bottom:
        22px;

}


.decision-flow strong {

    display:
        block;

    color:
        white;

    font-size:
        20px;

    margin-bottom:
        8px;

}


.decision-flow p {

    margin:
        0;

    color:
        #94a3b8;

    line-height:
        1.6;

    font-size:
        14px;

}


/* =========================================================
   SECURITY
   ========================================================= */

.security-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

    margin-top:
        50px;

}


.security-card {

    background:
        white;

    border:
        1px solid
        #e7edf4;

    border-radius:
        20px;

    padding:
        28px;

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.security-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.security-card > span {

    font-size:
        24px;

}


.security-card h3 {

    margin:
        18px 0 8px;

    color:
        #0f172a;

}


.security-card p {

    margin:
        0;

    color:
        #64748b;

    line-height:
        1.7;

}


/* =========================================================
   PRICING
   ========================================================= */

.pricing-section {

    padding:
        110px 6vw;

    background:
        #eef2f7;

}


.pricing-grid {

    max-width:
        1200px;

    margin:
        50px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

}


.pricing-card {

    position:
        relative;

    background:
        white;

    border-radius:
        22px;

    padding:
        30px;

    border:
        1px solid
        #e2e8f0;

    box-shadow:
        0 15px 35px
        rgba(
            15,
            23,
            42,
            0.05
        );

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.pricing-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.pricing-card.featured {

    border-color:
        #93c5fd;

    box-shadow:
        0 22px 50px
        rgba(
            37,
            99,
            235,
            0.14
        );

}


.pricing-tag {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        #2563eb;

    font-size:
        10px;

    font-weight:
        900;

}


.pricing-label {

    color:
        #2563eb;

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        1.6px;

    font-weight:
        900;

}


.pricing-card h3 {

    margin:
        12px 0 8px;

    font-size:
        28px;

    color:
        #0f172a;

}


.pricing-card p {

    color:
        #64748b;

    line-height:
        1.7;

}


.pricing-card ul {

    margin:
        25px 0;

    padding:
        0;

    list-style:
        none;

}


.pricing-card li {

    padding:
        8px 0;

    color:
        #475569;

    font-size:
        14px;

}


.pricing-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    color:
        white;

    background:
        #0f172a;

    border-radius:
        12px;

    padding:
        13px 18px;

    font-weight:
        800;

}


.featured .pricing-button {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {

    max-width:
        1200px;

    margin:
        110px auto;

    padding:
        55px;

    border-radius:
        26px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(
                96,
                165,
                250,
                0.20
            ),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #172554,
            #2e1065
        );

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.final-cta h2 {

    color:
        white;

    max-width:
        700px;

}


.final-cta > div > p:last-child {

    color:
        #94a3b8;

}


.final-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


/* =========================================================
   LANDING FOOTER
   ========================================================= */

.landing-footer {

    background:
        #0b1220;

    padding:
        55px 6vw;

    display:
        grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap:
        40px;

    color:
        #94a3b8;

}


.footer-brand p {

    max-width:
        340px;

    line-height:
        1.7;

}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.footer-links a {

    color:
        #cbd5e1;

    text-decoration:
        none;

}


.footer-links a:hover {

    color:
        white;

}


.footer-legal {

    display:
        flex;

    align-items:
        end;

    justify-content:
        end;

}


.footer-legal p {

    margin:
        0;

    font-size:
        12px;

}


/* =========================================================
   FOOTER / GENERAL
   ========================================================= */

.footer {

    text-align:
        center;

    padding:
        40px 25px;

    margin-top:
        50px;

    border-top:
        1px solid
        var(--mf-border);

    background:
        var(--mf-surface);

    color:
        var(--mf-text-muted);

}


.footer a {

    text-decoration:
        none;

    margin:
        0 12px;

    color:
        var(--mf-blue);

}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input,
select,
textarea {

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    border:
        1px solid
        var(--mf-border-strong);

}


input::placeholder,
textarea::placeholder {

    color:
        var(--mf-text-faint);

}


input:focus,
select:focus,
textarea:focus {

    outline:
        none;

    border-color:
        var(--mf-blue);

}


/* =========================================================
   THEME BUTTON SUPPORT
   ========================================================= */

.theme-button {

    font-size:
        16px;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .landing-nav {

        display:
            none;

    }


    .hero-section {

        grid-template-columns:
            1fr;

    }


    .dashboard-window {

        transform:
            none;

    }


    .feature-card-large {

        grid-column:
            span 6;

    }


    .feature-card {

        grid-column:
            span 3;

    }


    .decision-flow {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .pricing-grid {

        grid-template-columns:
            1fr;

        max-width:
            600px;

    }


    .landing-footer {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 900px) {

    .stats-grid,
    .info-grid,
    .chart-list {

        grid-template-columns:
            1fr;

    }


    .dashboard-kpi-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .dashboard-chart-grid {

        grid-template-columns:
            1fr;

    }


    .topbar {

        flex-direction:
            column;

        gap:
            15px;

        padding:
            18px 20px;

    }


    .account-area {

        width:
            100%;

        justify-content:
            center;

    }


    .main-nav {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }


    .topbar nav {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }


    .score-explanation-grid {

        grid-template-columns:
            1fr;

    }


    .chat-message {

        max-width:
            100%;

    }


    .chat-input {

        flex-direction:
            column;

    }


    .chat-input button {

        width:
            100%;

    }

}


@media (max-width: 700px) {

    .page-wrap {

        width:
            calc(
                100% - 28px
            );

        padding-top:
            28px;

    }


    .landing-header {

        padding:
            14px 20px;

    }


    .landing-actions
    .landing-login {

        display:
            none;

    }


    .hero-section {

        padding:
            65px 20px 45px;

    }


    .landing-section,
    .pricing-section,
    .decision-section {

        padding-left:
            20px;

        padding-right:
            20px;

    }


    .hero-content h1 {

        font-size:
            48px;

    }


    .mini-kpi-grid {

        grid-template-columns:
            1fr;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .feature-card,
    .feature-card-large {

        grid-column:
            span 1;

    }


    .security-grid {

        grid-template-columns:
            1fr;

    }


    .decision-flow {

        grid-template-columns:
            1fr;

    }


    .dashboard-kpi-grid {

        grid-template-columns:
            1fr;

    }


    .dashboard-chart-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .final-cta {

        margin:
            70px 20px;

        padding:
            35px 25px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .landing-footer {

        grid-template-columns:
            1fr;

    }


    .footer-legal {

        justify-content:
            flex-start;

    }


    .account-text {

        min-width:
            90px;

    }


    .account-text small {

        max-width:
            120px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }


    .account-menu,
    .notification-menu {

        right:
            -8px;

        width:
            min(
                320px,
                calc(
                    100vw - 28px
                )
            );

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}
/* =========================================================
   FOUNDER SECTION
   Compact premium layout
   ========================================================= */

.founder-section {

    max-width: 1150px;

    margin: 100px auto;

    padding: 55px 65px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #0b1220,
            #172554 55%,
            #2e1065
        );

    color: white;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 25px 70px
        rgba(
            15,
            23,
            42,
            0.18
        );

}


.founder-section::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -150px;

    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                96,
                165,
                250,
                0.18
            ),
            transparent 70%
        );

}


.founder-section::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    bottom: -140px;

    left: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                58,
                237,
                0.14
            ),
            transparent 70%
        );

}


.founder-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 50px;

}


/* =========================================================
   FOUNDER IMAGE
   ========================================================= */

.founder-avatar-wrap {

    position: relative;

    width: 210px;

    min-width: 210px;

    height: 210px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.founder-avatar-glow {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #7c3aed
        );

    filter:
        blur(24px);

    opacity:
        0.45;

}


.founder-avatar {

    position: relative;

    z-index: 2;

    width: 190px;

    height: 190px;

    border-radius: 50%;

    object-fit: cover;

    object-position: center 18%;

    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        0 20px 45px
        rgba(
            0,
            0,
            0,
            0.30
        );

}


/* =========================================================
   FOUNDER CONTENT
   ========================================================= */

.founder-content {

    max-width: 700px;

}


.founder-content .section-eyebrow {

    margin-bottom:
        8px;

    color:
        #60a5fa;

}


.founder-content h2 {

    margin:
        0;

    color:
        white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

}


.founder-role {

    margin:
        8px 0 18px;

    color:
        #a5b4fc !important;

    font-size:
        14px;

    font-weight:
        800;

}


.founder-lead {

    margin:
        0 0 15px;

    color:
        #f8fafc !important;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        21px;

    font-weight:
        600;

    line-height:
        1.35;

}


.founder-content > p {

    color:
        #cbd5e1;

    line-height:
        1.75;

    font-size:
        14px;

}


.founder-signature {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

}


.founder-signature span {

    color:
        #94a3b8;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

}


.founder-signature strong {

    color:
        white;

    font-family:
        "Space Grotesk",
        sans-serif;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .founder-section {

        margin:
            70px 20px;

        padding:
            40px 25px;

    }


    .founder-inner {

        flex-direction:
            column;

        text-align:
            center;

        gap:
            30px;

    }


    .founder-avatar-wrap {

        width:
            170px;

        min-width:
            170px;

        height:
            170px;

    }


    .founder-avatar {

        width:
            155px;

        height:
            155px;

    }


    .founder-signature {

        justify-content:
            center;

    }

}
/* =========================================================
   MERIDIAN PUBLIC HOMEPAGE — PREMIUM FINISH
   ========================================================= */

/* ---------- Landing theme button ---------- */

.landing-theme-button {

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dbe3ee;
    border-radius: 12px;

    background: rgba(255,255,255,0.88);

    color: #0f172a;

    cursor: pointer;

    font-size: 16px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.landing-theme-button:hover {

    transform: translateY(-2px);

    background: #ffffff;

    border-color: #93c5fd;

    box-shadow:
        0 8px 20px
        rgba(37,99,235,0.12);
}


/* ---------- Landing header ---------- */

.landing-header {

    padding:
        14px clamp(20px, 5vw, 72px);

    border-bottom:
        1px solid
        rgba(148,163,184,0.16);

    background:
        rgba(248,250,252,0.84);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.landing-brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        18px;

    letter-spacing:
        -0.035em;
}

.landing-brand-mark {

    width: 36px;
    height: 36px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 8px 20px
        rgba(37,99,235,0.18);
}

.landing-nav a {

    position: relative;
}

.landing-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -6px;

    height: 2px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #06b6d4
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.2s ease;
}

.landing-nav a:hover::after {

    transform:
        scaleX(1);
}


/* ---------- Hero ---------- */

.hero-section {

    min-height:
        calc(100vh - 70px);

    padding-top:
        clamp(60px, 9vw, 120px);

    padding-bottom:
        clamp(60px, 8vw, 100px);
}

.hero-badge {

    border:
        1px solid
        rgba(96,165,250,0.25);

    background:
        linear-gradient(
            135deg,
            rgba(239,246,255,0.9),
            rgba(236,254,255,0.9)
        );

    box-shadow:
        0 8px 24px
        rgba(37,99,235,0.08);
}

.hero-content h1 {

    max-width:
        780px;

    background:
        linear-gradient(
            135deg,
            #0f172a 10%,
            #1d4ed8 58%,
            #7c3aed 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}

.hero-copy {

    max-width:
        670px;

    font-size:
        18px;

    color:
        #64748b;
}

.hero-primary {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 18px 35px
        rgba(37,99,235,0.20);
}

.hero-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 24px 42px
        rgba(37,99,235,0.28);
}

.hero-secondary {

    border:
        1px solid
        #dbe3ee;

    box-shadow:
        0 8px 20px
        rgba(15,23,42,0.04);
}

.hero-secondary:hover {

    transform:
        translateY(-2px);

    border-color:
        #93c5fd;

    color:
        #2563eb;
}


/* ---------- Product preview ---------- */

.dashboard-window {

    position:
        relative;

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 35px 100px
        rgba(15,23,42,0.28);
}

.dashboard-window::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(96,165,250,0.24),
            transparent 38%,
            rgba(167,139,250,0.18)
        );

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite:
        exclude;

    padding:
        1px;
}

.mini-kpi strong {

    font-family:
        "JetBrains Mono",
        monospace;
}

.mini-chart-card {

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.04);
}

.mini-insight {

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.16),
            rgba(124,58,237,0.16)
        );
}

.insight-icon {

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    box-shadow:
        0 8px 20px
        rgba(124,58,237,0.28);
}


/* ---------- Trust ---------- */

.trust-section {

    padding-top:
        5px;

}

.trust-items span {

    padding:
        9px 14px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.7);
}


/* ---------- Section rhythm ---------- */

.landing-section {

    padding-top:
        120px;

    padding-bottom:
        120px;
}

.section-heading h2 {

    max-width:
        780px;

}

.section-heading > p:last-child {

    max-width:
        720px;

}


/* ---------- Feature cards ---------- */

.feature-card {

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        opacity 0.7s ease;
}

.feature-card:hover {

    transform:
        translateY(-7px);

    border-color:
        #bfdbfe;

    box-shadow:
        0 25px 55px
        rgba(15,23,42,0.09);
}

.feature-card:nth-child(2)
.feature-icon {

    background:
        #ecfeff;

    color:
        #0891b2;
}

.feature-card:nth-child(3)
.feature-icon {

    background:
        #f0fdf4;

    color:
        #059669;
}

.feature-card:nth-child(4)
.feature-icon {

    background:
        #fef3c7;

    color:
        #d97706;
}

.feature-card:nth-child(5)
.feature-icon {

    background:
        #f5f3ff;

    color:
        #7c3aed;
}


/* ---------- Differentiation ---------- */

.decision-section {

    position:
        relative;

    overflow:
        hidden;
}

.decision-section::before {

    content: "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        -250px;

    right:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.18),
            transparent 70%
        );

}

.decision-flow > div {

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.decision-flow > div:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,0.08);

    border-color:
        rgba(96,165,250,0.22);
}


/* ---------- Pricing ---------- */

.pricing-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        opacity 0.7s ease;
}

.pricing-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px
        rgba(15,23,42,0.10);
}

.pricing-card.featured {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );
}

.pricing-card.featured::before {

    content: "";

    position:
        absolute;

    inset: 0;

    border-radius:
        inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #7c3aed
        );

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite:
        exclude;

    pointer-events:
        none;
}


/* ---------- Final CTA ---------- */

.final-cta {

    position:
        relative;

    overflow:
        hidden;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,0.22);
}

.final-cta::before {

    content: "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    right:
        -100px;

    top:
        -100px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(34,211,238,0.18),
            transparent 70%
        );
}


/* ---------- Footer ---------- */

.landing-footer {

    border-top:
        1px solid
        rgba(148,163,184,0.10);
}

.footer-links a {

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-links a:hover {

    transform:
        translateX(3px);

}


/* =========================================================
   DARK THEME — PUBLIC SITE
   ========================================================= */

[data-theme="dark"] .landing-page {

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(37,99,235,0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(124,58,237,0.14),
            transparent 28%
        ),
        #070b14;
}

[data-theme="dark"] .landing-header {

    background:
        rgba(7,11,20,0.82);

    border-bottom:
        1px solid
        rgba(148,163,184,0.10);
}

[data-theme="dark"] .landing-brand {

    color:
        #f8fafc;
}

[data-theme="dark"] .landing-nav a {

    color:
        #cbd5e1;
}

[data-theme="dark"] .landing-nav a:hover {

    color:
        #93c5fd;
}

[data-theme="dark"] .landing-theme-button {

    background:
        rgba(15,23,42,0.86);

    border-color:
        #334155;

    color:
        #f8fafc;
}

[data-theme="dark"] .landing-theme-button:hover {

    border-color:
        #60a5fa;

    background:
        #172554;
}

[data-theme="dark"] .landing-login {

    color:
        #e2e8f0;
}

[data-theme="dark"] .hero-badge {

    background:
        rgba(23,37,84,0.72);

    border-color:
        rgba(96,165,250,0.22);

    color:
        #93c5fd;
}

[data-theme="dark"] .hero-content h1 {

    background:
        linear-gradient(
            135deg,
            #f8fafc 5%,
            #60a5fa 55%,
            #a78bfa 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}

[data-theme="dark"] .hero-copy {

    color:
        #94a3b8;
}

[data-theme="dark"] .hero-secondary {

    background:
        #0f172a;

    color:
        #f8fafc;

    border-color:
        #334155;
}

[data-theme="dark"] .hero-secondary:hover {

    border-color:
        #60a5fa;

    color:
        #93c5fd;
}

[data-theme="dark"] .trust-items span {

    background:
        rgba(15,23,42,0.80);

    border-color:
        #1e293b;

    color:
        #94a3b8;
}


/* ---------- Dark feature cards ---------- */

[data-theme="dark"] .feature-card {

    background:
        #0f172a;

    border-color:
        #1e293b;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.22);
}

[data-theme="dark"] .feature-card:hover {

    border-color:
        #334155;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.30);
}

[data-theme="dark"] .feature-card-large {

    background:
        linear-gradient(
            145deg,
            #111c2e,
            #172554 60%,
            #1e1b4b
        );
}

[data-theme="dark"] .feature-card h3 {

    color:
        #f8fafc;
}

[data-theme="dark"] .feature-card p {

    color:
        #94a3b8;
}


/* ---------- Dark security ---------- */

[data-theme="dark"] .security-card {

    background:
        #0f172a;

    border-color:
        #1e293b;
}

[data-theme="dark"] .security-card h3 {

    color:
        #f8fafc;
}

[data-theme="dark"] .security-card p {

    color:
        #94a3b8;
}


/* ---------- Dark pricing ---------- */

[data-theme="dark"] .pricing-section {

    background:
        #0a1020;
}

[data-theme="dark"] .pricing-card {

    background:
        #0f172a;

    border-color:
        #1e293b;
}

[data-theme="dark"] .pricing-card.featured {

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #111c2e
        );
}

[data-theme="dark"] .pricing-card h3 {

    color:
        #f8fafc;
}

[data-theme="dark"] .pricing-card p,
[data-theme="dark"] .pricing-card li {

    color:
        #94a3b8;
}


/* ---------- Dark founder ---------- */

[data-theme="dark"] .founder-section {

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.35);
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

    .landing-actions {

        gap:
            8px;
    }

    .landing-theme-button {

        width:
            38px;

        height:
            38px;
    }

    .landing-cta {

        padding:
            10px 14px;
    }

}
/* =========================================================
   PRODUCT PREVIEW LABEL
   ========================================================= */

.preview-label {

    display: inline-flex;

    padding: 6px 10px;

    margin-bottom: 14px;

    border-radius: 999px;

    background:
        rgba(96, 165, 250, 0.10);

    border:
        1px solid
        rgba(96, 165, 250, 0.16);

    color:
        #93c5fd;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}
/* =========================================================
   PREMIUM AUTHENTICATION
   ========================================================= */

.auth-page {

    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(37,99,235,0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(124,58,237,0.08),
            transparent 28%
        ),
        var(--mf-bg);

}


.auth-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(520px, 0.95fr);

}


.auth-showcase {

    position: relative;

    padding:
        45px clamp(30px, 5vw, 80px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37,99,235,0.40),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(124,58,237,0.28),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #07111f,
            #0f172a 45%,
            #172554
        );

}


.auth-showcase::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -250px;

    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,211,238,0.18),
            transparent 70%
        );

}


.auth-showcase-brand {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

    font-size: 20px;

}


.auth-showcase-mark {

    width: 38px;

    height: 38px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

}


.auth-showcase-content {

    position: relative;

    z-index: 2;

    max-width: 660px;

}


.auth-kicker {

    margin: 0 0 15px;

    color: #60a5fa;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.auth-showcase-content h2 {

    margin: 0 0 22px;

    color: white;

    font-size:
        clamp(42px, 5vw, 72px);

    line-height: 0.98;

    letter-spacing: -0.055em;

}


.auth-showcase-content > p {

    max-width: 610px;

    color: #cbd5e1;

    font-size: 16px;

    line-height: 1.8;

}


.auth-feature-list {

    display: grid;

    gap: 14px;

    margin-top: 34px;

}


.auth-feature-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    max-width: 470px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid
        rgba(255,255,255,0.08);

}


.auth-feature-icon {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(96,165,250,0.13);

    color: #60a5fa;

    font-weight: 800;

    font-size: 12px;

}


.auth-feature-icon.violet {

    background:
        rgba(167,139,250,0.13);

    color: #c4b5fd;

}


.auth-feature-icon.green {

    background:
        rgba(52,211,153,0.13);

    color: #6ee7b7;

}


.auth-feature-item strong {

    display: block;

    color: white;

    font-size: 13px;

}


.auth-feature-item small {

    display: block;

    margin-top: 4px;

    color: #94a3b8;

    font-size: 11px;

}


.auth-showcase-footer {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    color: #64748b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.auth-form-panel {

    position: relative;

    min-width: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        45px clamp(25px, 6vw, 90px);

    background:
        var(--mf-bg);

}


.auth-top-actions {

    position: absolute;

    top: 22px;

    right: 28px;

}


.auth-theme-button {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    border:
        1px solid
        var(--mf-border);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

}


.auth-theme-button:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--mf-blue);

    background:
        var(--mf-blue-soft);

}


.auth-form-content {

    width: 100%;

    max-width: 500px;

}


.auth-mobile-brand {

    display: none;

}


.auth-brand-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--mf-text);

    text-decoration: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

}


.auth-brand-mark {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

}


.premium-auth-form {

    gap: 18px;

}


.auth-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.auth-field label {

    margin: 0;

    color:
        var(--mf-text-soft);

    font-size: 13px;

    font-weight: 700;

}


.auth-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.auth-forgot {

    color:
        var(--mf-blue);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

}


.auth-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

}


.auth-input-icon {

    position: absolute;

    left: 14px;

    z-index: 2;

    color:
        var(--mf-text-faint);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 12px;

    pointer-events: none;

}


.auth-input-wrap input {

    width: 100%;

    min-height: 50px;

    padding:
        13px 45px 13px 38px;

    border:
        1px solid
        var(--mf-border-strong);

    border-radius: 13px;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.auth-input-wrap input:focus {

    border-color:
        var(--mf-blue);

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,0.10);

}


.password-toggle {

    position: absolute;

    right: 7px;

    top: 7px;

    bottom: 7px;

    padding:
        0 10px;

    border: none;

    border-radius: 9px;

    background:
        var(--mf-surface-muted);

    color:
        var(--mf-text-muted);

    cursor: pointer;

    font-size: 10px;

    font-weight: 800;

}


.password-toggle:hover {

    color:
        var(--mf-blue);

}


.field-hint {

    color:
        var(--mf-text-faint);

    font-size: 10px;

    line-height: 1.5;

}


.optional-label {

    margin-left: 5px;

    color:
        var(--mf-text-faint);

    font-weight: 500;

}


.auth-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: -3px;

}


.remember-option,
.terms-option {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color:
        var(--mf-text-muted);

    font-size: 11px;

    line-height: 1.5;

    cursor: pointer;

}


.remember-option input,
.terms-option input {

    margin-top: 2px;

    accent-color:
        var(--mf-blue);

}


.terms-option a {

    color:
        var(--mf-blue);

    text-decoration: none;

    font-weight: 700;

}


.premium-submit {

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}


.submit-arrow {

    transition:
        transform 0.2s ease;

}


.premium-submit:hover .submit-arrow {

    transform:
        translateX(4px);

}


.password-strength {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 15px;

}


.password-strength-bar {

    width: 0%;

    height: 4px;

    border-radius: 99px;

    background:
        var(--mf-border);

    transition:
        width 0.2s ease,
        background 0.2s ease;

}


.password-strength span {

    color:
        var(--mf-text-faint);

    font-size: 10px;

    font-weight: 700;

}


.strength-weak {

    color:
        var(--mf-danger) !important;

}


.strength-fair {

    color:
        var(--mf-warning) !important;

}


.strength-good {

    color:
        var(--mf-blue) !important;

}


.strength-strong {

    color:
        var(--mf-success) !important;

}


.auth-divider {

    margin:
        26px 0 18px;

}


.auth-register {

    text-align: center;

}


@media (max-width: 1000px) {

    .auth-shell {

        grid-template-columns:
            1fr;

    }


    .auth-showcase {

        display: none;

    }


    .auth-form-panel {

        min-height: 100vh;

        padding:
            70px 25px 45px;

    }


    .auth-mobile-brand {

        display: block;

        margin-bottom: 35px;

    }

}


@media (max-width: 600px) {

    .auth-form-panel {

        padding:
            70px 18px 30px;

    }


    .auth-top-actions {

        top: 16px;

        right: 18px;

    }


    .auth-card {

        padding:
            28px 22px;

    }

}
/* =========================================================
   EMAIL VERIFICATION
   ========================================================= */

.verification-email {

    margin:
        20px 0;

    padding:
        14px 16px;

    border:
        1px solid
        var(--mf-border);

    border-radius:
        12px;

    background:
        var(--mf-surface-soft);

    color:
        var(--mf-blue);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        13px;

    font-weight:
        600;

    overflow-wrap:
        anywhere;

}


.verification-note {

    padding:
        12px 14px;

    border:
        1px solid
        var(--mf-warning);

    border-radius:
        12px;

    background:
        var(--mf-warning-soft);

    color:
        var(--mf-text-soft);

    font-size:
        12px;

    line-height:
        1.6;

}


.auth-resend-input {

    width:
        100%;

    padding:
        14px 15px;

    margin-bottom:
        10px;

    border:
        1px solid
        var(--mf-border-strong);

    border-radius:
        12px;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

}/* =========================================================
   MERIDIAN FINOPS
   GLOBAL DESIGN SYSTEM
   Professional FinTech + Modern Gen-Z SaaS
   Light / Dark / System
   ========================================================= */


/* =========================================================
   GOOGLE FONTS
   ========================================================= */

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


/* =========================================================
   ROOT DESIGN TOKENS
   ========================================================= */

:root {

    /* ---------- Core backgrounds ---------- */

    --mf-bg: #f7f9fc;

    --mf-bg-alt: #eef3f9;

    --mf-surface: #ffffff;

    --mf-surface-soft: #f8fafc;

    --mf-surface-muted: #f1f5f9;


    /* ---------- Text ---------- */

    --mf-text: #0f172a;

    --mf-text-soft: #334155;

    --mf-text-muted: #64748b;

    --mf-text-faint: #94a3b8;


    /* ---------- Borders ---------- */

    --mf-border: #e2e8f0;

    --mf-border-strong: #cbd5e1;


    /* ---------- Brand ---------- */

    --mf-blue: #2563eb;

    --mf-blue-dark: #1d4ed8;

    --mf-blue-soft: #eff6ff;

    --mf-cyan: #06b6d4;

    --mf-cyan-soft: #ecfeff;

    --mf-violet: #7c3aed;

    --mf-violet-soft: #f5f3ff;


    /* ---------- Semantic ---------- */

    --mf-success: #10b981;

    --mf-success-soft: #ecfdf5;

    --mf-warning: #f59e0b;

    --mf-warning-soft: #fffbeb;

    --mf-danger: #f43f5e;

    --mf-danger-soft: #fff1f2;


    /* ---------- Shadows ---------- */

    --mf-shadow-sm:
        0 5px 15px
        rgba(15, 23, 42, 0.06);

    --mf-shadow:
        0 15px 40px
        rgba(15, 23, 42, 0.08);

    --mf-shadow-lg:
        0 25px 70px
        rgba(15, 23, 42, 0.14);


    /* ---------- Radius ---------- */

    --mf-radius-sm: 10px;

    --mf-radius: 16px;

    --mf-radius-lg: 22px;

    --mf-radius-xl: 28px;


    /* ---------- Transitions ---------- */

    --mf-fast: 0.18s ease;

    --mf-normal: 0.3s ease;

}


/* =========================================================
   DARK THEME
   ========================================================= */

[data-theme="dark"] {

    --mf-bg: #070b14;

    --mf-bg-alt: #0a1020;

    --mf-surface: #0f172a;

    --mf-surface-soft: #111c2e;

    --mf-surface-muted: #172235;


    --mf-text: #f8fafc;

    --mf-text-soft: #e2e8f0;

    --mf-text-muted: #94a3b8;

    --mf-text-faint: #64748b;


    --mf-border: #1e293b;

    --mf-border-strong: #334155;


    --mf-blue: #60a5fa;

    --mf-blue-dark: #3b82f6;

    --mf-blue-soft: #172554;

    --mf-cyan: #22d3ee;

    --mf-cyan-soft: #083344;

    --mf-violet: #a78bfa;

    --mf-violet-soft: #2e1065;


    --mf-success: #34d399;

    --mf-success-soft: #052e25;

    --mf-warning: #fbbf24;

    --mf-warning-soft: #3b2700;

    --mf-danger: #fb7185;

    --mf-danger-soft: #450a0a;


    --mf-shadow-sm:
        0 8px 20px
        rgba(0, 0, 0, 0.22);

    --mf-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.30);

    --mf-shadow-lg:
        0 30px 80px
        rgba(0, 0, 0, 0.40);

}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--mf-bg);

    color:
        var(--mf-text);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        "Space Grotesk",
        "Inter",
        sans-serif;

}


button,
input,
select,
textarea {

    font-family:
        "Inter",
        sans-serif;

}


a {

    transition:
        color var(--mf-fast),
        background-color var(--mf-fast),
        border-color var(--mf-fast),
        transform var(--mf-fast);

}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 25px;

    padding:
        16px
        42px;

    background:
        linear-gradient(
            135deg,
            #0b1220,
            #172554
        );

    color: white;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:
        0 10px 35px
        rgba(15, 23, 42, 0.12);

}


.brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 26px;

    font-weight: 700;

    letter-spacing: -0.04em;

    white-space: nowrap;

}


/* ---------- Navigation ---------- */

.main-nav {

    display: flex;

    gap: 24px;

    align-items: center;

}


nav {

    display: flex;

    gap: 24px;

}


.main-nav a,
nav a {

    color: rgba(255, 255, 255, 0.86);

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

}


.main-nav a:hover,
nav a:hover {

    color: white;

    transform:
        translateY(-1px);

}


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.page-wrap {

    width: min(
        1400px,
        calc(100% - 48px)
    );

    margin:
        0 auto;

    padding:
        42px 0
        70px;

}


.section-header {

    margin-bottom: 34px;

}


.eyebrow {

    margin: 0 0 10px;

    color:
        var(--mf-blue);

    text-transform: uppercase;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.section-header h1 {

    margin:
        0 0 10px;

    font-size:
        clamp(
            40px,
            6vw,
            68px
        );

    line-height: 0.98;

    letter-spacing:
        -0.055em;

    color:
        var(--mf-text);

}


.section-header p:last-child {

    color:
        var(--mf-text-muted);

    font-size: 17px;

}


/* =========================================================
   GRID SYSTEM
   ========================================================= */

.info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    margin-bottom: 26px;

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 22px;

    margin-bottom: 30px;

}


/* =========================================================
   INFO / STAT CARDS
   ========================================================= */

.info-card,
.stat-card {

    position: relative;

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-lg);

    padding:
        26px;

    box-shadow:
        var(--mf-shadow-sm);

    overflow: hidden;

    transition:
        transform var(--mf-normal),
        box-shadow var(--mf-normal),
        border-color var(--mf-normal),
        background-color var(--mf-normal);

}


.info-card::before,
.stat-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--mf-blue),
            var(--mf-cyan),
            var(--mf-violet)
        );

    opacity: 0.85;

}


.info-card:hover,
.stat-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--mf-shadow);

    border-color:
        color-mix(
            in srgb,
            var(--mf-blue) 35%,
            var(--mf-border)
        );

}


.info-card h3 {

    margin:
        0 0 14px;

    color:
        var(--mf-text);

    font-size: 18px;

}


.info-card p {

    color:
        var(--mf-text-muted);

    line-height: 1.65;

}


.info-card h2,
.stat-card h2 {

    margin:
        8px 0;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        clamp(
            25px,
            3vw,
            40px
        );

    letter-spacing:
        -0.04em;

    color:
        var(--mf-text);

}


/* =========================================================
   KPI CARDS
   ========================================================= */

.dashboard-kpi-grid {

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(1)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-blue),
            var(--mf-cyan)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(2)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-success),
            var(--mf-cyan)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(3)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-warning),
            var(--mf-danger)
        );

}


.dashboard-kpi-grid
.info-card:nth-child(4)::before {

    background:
        linear-gradient(
            90deg,
            var(--mf-violet),
            var(--mf-blue)
        );

}


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.hero-panel,
.upload-box,
.chat-box,
.report-card {

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-lg);

    padding:
        30px;

    margin-bottom:
        26px;

    box-shadow:
        var(--mf-shadow-sm);

    transition:
        background-color var(--mf-normal),
        border-color var(--mf-normal),
        box-shadow var(--mf-normal),
        transform var(--mf-normal);

}


.panel:hover,
.hero-panel:hover,
.upload-box:hover,
.report-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--mf-shadow);

}


.panel h2 {

    margin-top: 0;

    color:
        var(--mf-text);

}


/* =========================================================
   BUTTONS
   ========================================================= */

.action-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 22px;

}


.action-buttons button,
.primary-btn,
.chat-input button {

    appearance: none;

    border: none;

    border-radius:
        12px;

    padding:
        13px 20px;

    font-size: 14px;

    font-weight: 800;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--mf-blue),
            var(--mf-blue-dark)
        );

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.20);

    transition:
        transform var(--mf-fast),
        box-shadow var(--mf-fast);

}


.action-buttons button:hover,
.primary-btn:hover,
.chat-input button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(37, 99, 235, 0.28);

}


/* =========================================================
   LINKS
   ========================================================= */

.info-card a,
.panel a,
.report-card a {

    color:
        var(--mf-blue);

    font-weight:
        700;

    text-decoration:
        none;

}


.info-card a:hover,
.panel a:hover,
.report-card a:hover {

    color:
        var(--mf-violet);

}


/* =========================================================
   DASHBOARD CHARTS
   ========================================================= */

.dashboard-chart-card {

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-xl);

    padding:
        28px;

    box-shadow:
        var(--mf-shadow);

    margin-bottom:
        24px;

    transition:
        background-color var(--mf-normal),
        border-color var(--mf-normal);

}


.dashboard-chart-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        24px;

    margin-bottom:
        24px;

}


.dashboard-chart-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    margin-bottom:
        20px;

}


.chart-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--mf-blue);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;

}


.dashboard-chart-header h2 {

    margin:
        0;

    color:
        var(--mf-text);

    font-size:
        25px;

    letter-spacing:
        -0.035em;

}


.chart-range {

    color:
        var(--mf-text-muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;

}


.chart-container {

    position:
        relative;

    height:
        340px;

}


.chart-empty-state {

    padding:
        60px 20px;

    text-align:
        center;

    color:
        var(--mf-text-muted);

}


.chart-empty-state strong {

    display:
        block;

    color:
        var(--mf-text);

    margin-bottom:
        8px;

}


.chart-empty-state p {

    max-width:
        520px;

    margin:
        0 auto;

    line-height:
        1.7;

}


/* =========================================================
   ANALYSIS CHART IMAGE
   ========================================================= */

.analysis-chart {

    width: 100%;

    max-width:
        900px;

    display:
        block;

    margin:
        30px auto;

    border-radius:
        var(--mf-radius);

}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.file-input-wrap {

    border:
        2px dashed
        var(--mf-border-strong);

    padding:
        20px;

    border-radius:
        var(--mf-radius);

    background:
        var(--mf-surface-soft);

}


/* =========================================================
   CHART LIST
   ========================================================= */

.chart-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        20px;

}


.chart-item {

    background:
        var(--mf-surface);

    padding:
        20px;

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius);

    box-shadow:
        var(--mf-shadow-sm);

}


/* =========================================================
   ACCOUNT HEADER
   ========================================================= */

.account-area {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.notification-button,
.theme-button {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        white;

    cursor:
        pointer;

    transition:
        background-color var(--mf-fast),
        border-color var(--mf-fast),
        transform var(--mf-fast);

}


.notification-button:hover,
.theme-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    transform:
        translateY(-1px);

}


.notification-button {

    position:
        relative;

    font-size:
        17px;

}


.notification-badge {

    position:
        absolute;

    top:
        -4px;

    right:
        -4px;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 5px;

    border-radius:
        999px;

    background:
        var(--mf-danger);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   THEME SWITCHER
   ========================================================= */

.theme-switcher {

    display:
        flex;

    align-items:
        center;

}


/* =========================================================
   ACCOUNT BUTTON
   ========================================================= */

.account-button {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        white;

    padding:
        6px 10px;

    cursor:
        pointer;

    text-align:
        left;

}


.account-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

}


.avatar {

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dbeafe
        );

    color:
        #1d4ed8;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        800;

    flex-shrink:
        0;

}


.avatar.large {

    width:
        48px;

    height:
        48px;

    font-size:
        18px;

}


.account-text {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        125px;

}


.account-text strong {

    font-size:
        13px;

}


.account-text small {

    margin-top:
        2px;

    opacity:
        0.78;

    font-size:
        10px;

}


.account-arrow {

    font-size:
        13px;

    margin-left:
        4px;

}


/* =========================================================
   ACCOUNT / NOTIFICATION MENUS
   ========================================================= */

.account-menu,
.notification-menu {

    position:
        absolute;

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius);

    box-shadow:
        var(--mf-shadow-lg);

    display:
        none;

    z-index:
        1500;

    color:
        var(--mf-text);

}


.account-menu {

    top:
        calc(
            100% + 12px
        );

    right:
        0;

    width:
        290px;

    padding:
        10px;

}


.notification-menu {

    top:
        calc(
            100% + 12px
        );

    right:
        0;

    width:
        330px;

    padding:
        12px;

}


.account-menu.show,
.notification-menu.show {

    display:
        block;

}


.account-menu-header {

    display:
        flex;

    gap:
        12px;

    padding:
        10px;

    align-items:
        flex-start;

}


.account-menu-header > div:last-child {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


.account-menu-header strong {

    color:
        var(--mf-text);

    font-size:
        14px;

}


.account-menu-header span {

    color:
        var(--mf-text-muted);

    font-size:
        11px;

    margin-top:
        3px;

    overflow-wrap:
        anywhere;

}


.account-menu-divider {

    height:
        1px;

    background:
        var(--mf-border);

    margin:
        8px 0;

}


.account-menu a {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 12px;

    border-radius:
        10px;

    color:
        var(--mf-text-soft);

    text-decoration:
        none;

    font-weight:
        600;

    font-size:
        13px;

}


.account-menu a:hover {

    background:
        var(--mf-surface-muted);

    color:
        var(--mf-blue);

}


.account-menu
.logout-link {

    color:
        var(--mf-danger);

}


.notification-menu-title {

    font-weight:
        800;

    color:
        var(--mf-text);

    padding:
        10px;

}


.notification-item {

    padding:
        12px;

    border:
        1px solid
        var(--mf-border);

    border-radius:
        11px;

    background:
        var(--mf-surface-soft);

    margin-top:
        8px;

}


.notification-item strong {

    display:
        block;

    color:
        var(--mf-text);

    font-size:
        12px;

}


.notification-item span {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--mf-text-muted);

    font-size:
        11px;

    line-height:
        1.5;

}


.notification-empty {

    padding:
        15px;

    color:
        var(--mf-text-muted);

    font-size:
        12px;

}


/* =========================================================
   CHATBOT
   ========================================================= */

.chat-box {

    background:
        var(--mf-surface);

}


#chat-messages {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

    margin-bottom:
        25px;

    max-height:
        500px;

    overflow-y:
        auto;

    padding-right:
        10px;

}


.chat-message {

    max-width:
        75%;

    padding:
        18px 22px;

    border-radius:
        18px;

    line-height:
        1.6;

    font-size:
        15px;

    animation:
        fadeIn 0.3s ease;

}


.chat-message.bot {

    background:
        linear-gradient(
            135deg,
            var(--mf-violet-soft),
            var(--mf-blue-soft)
        );

    color:
        var(--mf-text);

    align-self:
        flex-start;

}


.chat-message.user {

    background:
        linear-gradient(
            135deg,
            var(--mf-blue),
            var(--mf-violet)
        );

    color:
        white;

    align-self:
        flex-end;

    margin-left:
        auto;

}


.quick-questions {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

    margin-top:
        20px;

}


.quick-questions button {

    background:
        var(--mf-blue-soft);

    color:
        var(--mf-blue);

    border:
        1px solid
        var(--mf-border);

    padding:
        11px 16px;

    border-radius:
        12px;

    cursor:
        pointer;

    font-weight:
        700;

}


.chat-input {

    display:
        flex;

    gap:
        12px;

    margin-top:
        24px;

}


.chat-input input {

    flex:
        1;

    padding:
        15px;

    border:
        1px solid
        var(--mf-border-strong);

    border-radius:
        12px;

    font-size:
        15px;

    outline:
        none;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

}


.chat-input input:focus {

    border-color:
        var(--mf-blue);

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.10
        );

}


@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLES
   ========================================================= */

.recommendation-table {

    width:
        100%;

    border-collapse:
        collapse;

    margin-top:
        20px;

    overflow:
        hidden;

    border-radius:
        var(--mf-radius);

}


.recommendation-table th,
.recommendation-table td {

    padding:
        15px;

    border-bottom:
        1px solid
        var(--mf-border);

    text-align:
        left;

}


.recommendation-table th {

    background:
        var(--mf-blue-soft);

    color:
        var(--mf-blue);

    font-weight:
        800;

}


.recommendation-table tr:hover {

    background:
        var(--mf-surface-soft);

}


/* =========================================================
   SCORE EXPLANATIONS
   ========================================================= */

.score-explanation-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        24px;

}


.score-explanation-grid > div {

    background:
        var(--mf-surface-soft);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        14px;

    padding:
        20px;

}


.score-explanation-grid ul {

    margin-bottom:
        0;

    padding-left:
        20px;

    line-height:
        1.8;

}


/* =========================================================
   AUTHENTICATION
   ========================================================= */

.auth-page {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(
                37,
                99,
                235,
                0.08
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(
                124,
                58,
                237,
                0.08
            ),
            transparent 28%
        ),
        var(--mf-bg);

}


.auth-card {

    width:
        100%;

    max-width:
        500px;

    background:
        var(--mf-surface);

    border:
        1px solid
        var(--mf-border);

    border-radius:
        var(--mf-radius-xl);

    padding:
        42px;

    box-shadow:
        var(--mf-shadow-lg);

}


.auth-brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        28px;

    font-weight:
        700;

    color:
        var(--mf-text);

    margin-bottom:
        30px;

}


.auth-card h1 {

    font-size:
        42px;

    margin:
        10px 0;

    color:
        var(--mf-text);

}


.auth-subtitle {

    color:
        var(--mf-text-muted);

    margin-bottom:
        30px;

    line-height:
        1.7;

}


.auth-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.auth-form label {

    font-weight:
        700;

    color:
        var(--mf-text-soft);

    margin-top:
        10px;

}


.auth-form input {

    width:
        100%;

    padding:
        14px 15px;

    border:
        1px solid
        var(--mf-border-strong);

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    border-radius:
        12px;

    font-size:
        15px;

    outline:
        none;

}


.auth-form input:focus {

    border-color:
        var(--mf-blue);

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.10
        );

}


.auth-submit {

    width:
        100%;

    margin-top:
        15px;

}


.auth-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        30px 0 20px;

    color:
        var(--mf-text-muted);

    font-size:
        13px;

}


.auth-divider::before,
.auth-divider::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        var(--mf-border);

}


.secondary-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    padding:
        13px 20px;

    border-radius:
        12px;

    border:
        1px solid
        var(--mf-blue);

    color:
        var(--mf-blue);

    text-decoration:
        none;

    font-weight:
        700;

}


.secondary-btn:hover {

    background:
        var(--mf-blue-soft);

}


.auth-footer {

    margin-top:
        25px;

    text-align:
        center;

    color:
        var(--mf-text-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


.auth-footer a {

    color:
        var(--mf-blue);

    text-decoration:
        none;

}


/* =========================================================
   PUBLIC LANDING PAGE
   ========================================================= */

.landing-page {

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(
                37,
                99,
                235,
                0.10
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(
                14,
                165,
                233,
                0.08
            ),
            transparent 28%
        ),
        var(--mf-bg);

}


.landing-header {

    position:
        sticky;

    top:
        0;

    z-index:
        500;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        16px 6vw;

    background:
        rgba(
            248,
            250,
            252,
            0.90
        );

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            0.20
        );

}


.landing-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #0f172a;

    text-decoration:
        none;

    font-weight:
        800;

    font-size:
        19px;

}


.landing-brand-mark {

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    color:
        white;

    font-weight:
        900;

}


.landing-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.landing-nav a {

    color:
        #475569;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

}


.landing-nav a:hover {

    color:
        #2563eb;

}


.landing-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.landing-login {

    color:
        #334155;

    text-decoration:
        none;

    font-weight:
        700;

    font-size:
        14px;

    padding:
        11px 14px;

}


.landing-cta {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;

    padding:
        12px 18px;

    border-radius:
        12px;

    box-shadow:
        0 10px 24px
        rgba(
            37,
            99,
            235,
            0.18
        );

}


/* =========================================================
   LANDING HERO
   ========================================================= */

.hero-section {

    max-width:
        1400px;

    margin:
        0 auto;

    padding:
        90px 6vw 70px;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    max-width:
        720px;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        #1d4ed8;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.5px;

    text-transform:
        uppercase;

}


.pulse-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 6px
        rgba(
            34,
            197,
            94,
            0.10
        );

}


.hero-content h1 {

    margin:
        22px 0;

    font-size:
        clamp(
            48px,
            6vw,
            82px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    color:
        #0f172a;

    max-width:
        760px;

}


.hero-copy {

    max-width:
        650px;

    font-size:
        18px;

    line-height:
        1.8;

    color:
        #64748b;

}


.hero-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;

    margin-top:
        30px;

}


.hero-primary,
.hero-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px 22px;

    border-radius:
        13px;

    text-decoration:
        none;

    font-weight:
        800;

}


.hero-primary {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 16px 35px
        rgba(
            37,
            99,
            235,
            0.20
        );

}


.hero-secondary {

    color:
        #0f172a;

    background:
        white;

    border:
        1px solid
        #dbe3ee;

}


.hero-providers {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        34px;

    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


/* =========================================================
   LANDING DASHBOARD VISUAL
   ========================================================= */

.hero-visual {

    position:
        relative;

}


.dashboard-window {

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #162033
        );

    border-radius:
        26px;

    overflow:
        hidden;

    box-shadow:
        0 30px 80px
        rgba(
            15,
            23,
            42,
            0.22
        );

    transform:
        perspective(1200px)
        rotateY(-6deg)
        rotateX(2deg);

}


.window-topbar {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        14px 18px;

    color:
        #cbd5e1;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.window-dots {

    display:
        flex;

    gap:
        6px;

}


.window-dots span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #64748b;

}


.window-title {

    font-size:
        12px;

    font-weight:
        700;

}


.mini-dashboard {

    padding:
        22px;

}


.mini-kpi-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        12px;

}


.mini-kpi {

    padding:
        16px;

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.mini-kpi span,
.mini-kpi small {

    display:
        block;

    color:
        #94a3b8;

    font-size:
        11px;

}


.mini-kpi strong {

    display:
        block;

    margin:
        7px 0;

    color:
        white;

    font-size:
        21px;

    font-family:
        "JetBrains Mono",
        monospace;

}


.mini-kpi .positive {

    color:
        #4ade80;

}


.mini-chart-card {

    margin-top:
        14px;

    padding:
        18px;

    border-radius:
        17px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

}


.mini-card-heading {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #cbd5e1;

    font-size:
        11px;

    margin-bottom:
        18px;

}


.chart-bars {

    height:
        145px;

    display:
        flex;

    align-items:
        end;

    gap:
        9px;

}


.chart-bars span {

    flex:
        1;

    min-width:
        12px;

    border-radius:
        6px 6px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #7c3aed
        );

}


.mini-insight {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        14px;

    padding:
        14px;

    border-radius:
        15px;

    background:
        rgba(
            37,
            99,
            235,
            0.14
        );

    border:
        1px solid
        rgba(
            96,
            165,
            250,
            0.12
        );

    color:
        white;

}


.insight-icon {

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    font-weight:
        900;

}


.mini-insight strong {

    font-size:
        12px;

}


.mini-insight p {

    margin:
        3px 0 0;

    color:
        #94a3b8;

    font-size:
        11px;

}


.insight-arrow {

    margin-left:
        auto;

    color:
        #93c5fd;

    font-size:
        18px;

}


/* =========================================================
   LANDING SECTIONS
   ========================================================= */

.trust-section {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        18px 6vw 70px;

    text-align:
        center;

}


.trust-section > p {

    color:
        #94a3b8;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

}


.trust-items {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        30px;

    margin-top:
        20px;

    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.landing-section {

    max-width:
        1300px;

    margin:
        0 auto;

    padding:
        110px 6vw;

}


.section-heading {

    max-width:
        720px;

}


.section-heading.centered {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

}


.section-eyebrow {

    color:
        #2563eb;

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


.section-heading h2,
.decision-content h2,
.final-cta h2 {

    margin:
        12px 0 18px;

    font-size:
        clamp(
            34px,
            4vw,
            56px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

    color:
        #0f172a;

}


.section-heading > p:last-child,
.decision-content > p {

    color:
        #64748b;

    line-height:
        1.8;

    font-size:
        16px;

}


.feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap:
        18px;

    margin-top:
        50px;

}


.feature-card {

    grid-column:
        span 2;

    padding:
        28px;

    border-radius:
        22px;

    background:
        white;

    border:
        1px solid
        #e7edf4;

    box-shadow:
        0 15px 40px
        rgba(
            15,
            23,
            42,
            0.06
        );

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.feature-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.feature-card-large {

    grid-column:
        span 4;

    min-height:
        260px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #f5f3ff 55%,
            white 100%
        );

}


.feature-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eff6ff;

    color:
        #2563eb;

    font-weight:
        900;

    margin-bottom:
        22px;

}


.feature-card h3 {

    margin:
        0 0 10px;

    color:
        #0f172a;

    font-size:
        21px;

}


.feature-card p {

    margin:
        0;

    color:
        #64748b;

    line-height:
        1.7;

}


.feature-metric {

    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

    margin-top:
        26px;

}


.feature-metric strong {

    color:
        #2563eb;

    font-size:
        36px;

    font-family:
        "JetBrains Mono",
        monospace;

}


.feature-metric span {

    color:
        #64748b;

}


.decision-section {

    background:
        linear-gradient(
            145deg,
            #0f172a,
            #172554,
            #2e1065
        );

    color:
        white;

    padding:
        110px 6vw;

}


.decision-content {

    max-width:
        1300px;

    margin:
        0 auto;

}


.decision-content h2 {

    color:
        white;

    max-width:
        800px;

}


.decision-content > p {

    max-width:
        760px;

    color:
        #94a3b8;

}


.decision-flow {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        14px;

    margin-top:
        50px;

}


.decision-flow > div {

    padding:
        24px;

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.decision-flow span {

    display:
        block;

    color:
        #60a5fa;

    font-size:
        12px;

    font-weight:
        900;

    margin-bottom:
        22px;

}


.decision-flow strong {

    display:
        block;

    color:
        white;

    font-size:
        20px;

    margin-bottom:
        8px;

}


.decision-flow p {

    margin:
        0;

    color:
        #94a3b8;

    line-height:
        1.6;

    font-size:
        14px;

}


/* =========================================================
   SECURITY
   ========================================================= */

.security-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

    margin-top:
        50px;

}


.security-card {

    background:
        white;

    border:
        1px solid
        #e7edf4;

    border-radius:
        20px;

    padding:
        28px;

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.security-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.security-card > span {

    font-size:
        24px;

}


.security-card h3 {

    margin:
        18px 0 8px;

    color:
        #0f172a;

}


.security-card p {

    margin:
        0;

    color:
        #64748b;

    line-height:
        1.7;

}


/* =========================================================
   PRICING
   ========================================================= */

.pricing-section {

    padding:
        110px 6vw;

    background:
        #eef2f7;

}


.pricing-grid {

    max-width:
        1200px;

    margin:
        50px auto 0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

}


.pricing-card {

    position:
        relative;

    background:
        white;

    border-radius:
        22px;

    padding:
        30px;

    border:
        1px solid
        #e2e8f0;

    box-shadow:
        0 15px 35px
        rgba(
            15,
            23,
            42,
            0.05
        );

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.pricing-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.pricing-card.featured {

    border-color:
        #93c5fd;

    box-shadow:
        0 22px 50px
        rgba(
            37,
            99,
            235,
            0.14
        );

}


.pricing-tag {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        #2563eb;

    font-size:
        10px;

    font-weight:
        900;

}


.pricing-label {

    color:
        #2563eb;

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        1.6px;

    font-weight:
        900;

}


.pricing-card h3 {

    margin:
        12px 0 8px;

    font-size:
        28px;

    color:
        #0f172a;

}


.pricing-card p {

    color:
        #64748b;

    line-height:
        1.7;

}


.pricing-card ul {

    margin:
        25px 0;

    padding:
        0;

    list-style:
        none;

}


.pricing-card li {

    padding:
        8px 0;

    color:
        #475569;

    font-size:
        14px;

}


.pricing-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    color:
        white;

    background:
        #0f172a;

    border-radius:
        12px;

    padding:
        13px 18px;

    font-weight:
        800;

}


.featured .pricing-button {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {

    max-width:
        1200px;

    margin:
        110px auto;

    padding:
        55px;

    border-radius:
        26px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(
                96,
                165,
                250,
                0.20
            ),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #172554,
            #2e1065
        );

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.final-cta h2 {

    color:
        white;

    max-width:
        700px;

}


.final-cta > div > p:last-child {

    color:
        #94a3b8;

}


.final-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


/* =========================================================
   LANDING FOOTER
   ========================================================= */

.landing-footer {

    background:
        #0b1220;

    padding:
        55px 6vw;

    display:
        grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap:
        40px;

    color:
        #94a3b8;

}


.footer-brand p {

    max-width:
        340px;

    line-height:
        1.7;

}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.footer-links a {

    color:
        #cbd5e1;

    text-decoration:
        none;

}


.footer-links a:hover {

    color:
        white;

}


.footer-legal {

    display:
        flex;

    align-items:
        end;

    justify-content:
        end;

}


.footer-legal p {

    margin:
        0;

    font-size:
        12px;

}


/* =========================================================
   FOOTER / GENERAL
   ========================================================= */

.footer {

    text-align:
        center;

    padding:
        40px 25px;

    margin-top:
        50px;

    border-top:
        1px solid
        var(--mf-border);

    background:
        var(--mf-surface);

    color:
        var(--mf-text-muted);

}


.footer a {

    text-decoration:
        none;

    margin:
        0 12px;

    color:
        var(--mf-blue);

}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input,
select,
textarea {

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    border:
        1px solid
        var(--mf-border-strong);

}


input::placeholder,
textarea::placeholder {

    color:
        var(--mf-text-faint);

}


input:focus,
select:focus,
textarea:focus {

    outline:
        none;

    border-color:
        var(--mf-blue);

}


/* =========================================================
   THEME BUTTON SUPPORT
   ========================================================= */

.theme-button {

    font-size:
        16px;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .landing-nav {

        display:
            none;

    }


    .hero-section {

        grid-template-columns:
            1fr;

    }


    .dashboard-window {

        transform:
            none;

    }


    .feature-card-large {

        grid-column:
            span 6;

    }


    .feature-card {

        grid-column:
            span 3;

    }


    .decision-flow {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .pricing-grid {

        grid-template-columns:
            1fr;

        max-width:
            600px;

    }


    .landing-footer {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 900px) {

    .stats-grid,
    .info-grid,
    .chart-list {

        grid-template-columns:
            1fr;

    }


    .dashboard-kpi-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .dashboard-chart-grid {

        grid-template-columns:
            1fr;

    }


    .topbar {

        flex-direction:
            column;

        gap:
            15px;

        padding:
            18px 20px;

    }


    .account-area {

        width:
            100%;

        justify-content:
            center;

    }


    .main-nav {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }


    .topbar nav {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }


    .score-explanation-grid {

        grid-template-columns:
            1fr;

    }


    .chat-message {

        max-width:
            100%;

    }


    .chat-input {

        flex-direction:
            column;

    }


    .chat-input button {

        width:
            100%;

    }

}


@media (max-width: 700px) {

    .page-wrap {

        width:
            calc(
                100% - 28px
            );

        padding-top:
            28px;

    }


    .landing-header {

        padding:
            14px 20px;

    }


    .landing-actions
    .landing-login {

        display:
            none;

    }


    .hero-section {

        padding:
            65px 20px 45px;

    }


    .landing-section,
    .pricing-section,
    .decision-section {

        padding-left:
            20px;

        padding-right:
            20px;

    }


    .hero-content h1 {

        font-size:
            48px;

    }


    .mini-kpi-grid {

        grid-template-columns:
            1fr;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .feature-card,
    .feature-card-large {

        grid-column:
            span 1;

    }


    .security-grid {

        grid-template-columns:
            1fr;

    }


    .decision-flow {

        grid-template-columns:
            1fr;

    }


    .dashboard-kpi-grid {

        grid-template-columns:
            1fr;

    }


    .dashboard-chart-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .final-cta {

        margin:
            70px 20px;

        padding:
            35px 25px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .landing-footer {

        grid-template-columns:
            1fr;

    }


    .footer-legal {

        justify-content:
            flex-start;

    }


    .account-text {

        min-width:
            90px;

    }


    .account-text small {

        max-width:
            120px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }


    .account-menu,
    .notification-menu {

        right:
            -8px;

        width:
            min(
                320px,
                calc(
                    100vw - 28px
                )
            );

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}
/* =========================================================
   FOUNDER SECTION
   Compact premium layout
   ========================================================= */

.founder-section {

    max-width: 1150px;

    margin: 100px auto;

    padding: 55px 65px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #0b1220,
            #172554 55%,
            #2e1065
        );

    color: white;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 25px 70px
        rgba(
            15,
            23,
            42,
            0.18
        );

}


.founder-section::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -150px;

    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                96,
                165,
                250,
                0.18
            ),
            transparent 70%
        );

}


.founder-section::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    bottom: -140px;

    left: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                58,
                237,
                0.14
            ),
            transparent 70%
        );

}


.founder-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 50px;

}


/* =========================================================
   FOUNDER IMAGE
   ========================================================= */

.founder-avatar-wrap {

    position: relative;

    width: 210px;

    min-width: 210px;

    height: 210px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.founder-avatar-glow {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #7c3aed
        );

    filter:
        blur(24px);

    opacity:
        0.45;

}


.founder-avatar {

    position: relative;

    z-index: 2;

    width: 190px;

    height: 190px;

    border-radius: 50%;

    object-fit: cover;

    object-position: center 18%;

    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        0 20px 45px
        rgba(
            0,
            0,
            0,
            0.30
        );

}


/* =========================================================
   FOUNDER CONTENT
   ========================================================= */

.founder-content {

    max-width: 700px;

}


.founder-content .section-eyebrow {

    margin-bottom:
        8px;

    color:
        #60a5fa;

}


.founder-content h2 {

    margin:
        0;

    color:
        white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

}


.founder-role {

    margin:
        8px 0 18px;

    color:
        #a5b4fc !important;

    font-size:
        14px;

    font-weight:
        800;

}


.founder-lead {

    margin:
        0 0 15px;

    color:
        #f8fafc !important;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        21px;

    font-weight:
        600;

    line-height:
        1.35;

}


.founder-content > p {

    color:
        #cbd5e1;

    line-height:
        1.75;

    font-size:
        14px;

}


.founder-signature {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

}


.founder-signature span {

    color:
        #94a3b8;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

}


.founder-signature strong {

    color:
        white;

    font-family:
        "Space Grotesk",
        sans-serif;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .founder-section {

        margin:
            70px 20px;

        padding:
            40px 25px;

    }


    .founder-inner {

        flex-direction:
            column;

        text-align:
            center;

        gap:
            30px;

    }


    .founder-avatar-wrap {

        width:
            170px;

        min-width:
            170px;

        height:
            170px;

    }


    .founder-avatar {

        width:
            155px;

        height:
            155px;

    }


    .founder-signature {

        justify-content:
            center;

    }

}
/* =========================================================
   MERIDIAN PUBLIC HOMEPAGE — PREMIUM FINISH
   ========================================================= */

/* ---------- Landing theme button ---------- */

.landing-theme-button {

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dbe3ee;
    border-radius: 12px;

    background: rgba(255,255,255,0.88);

    color: #0f172a;

    cursor: pointer;

    font-size: 16px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.landing-theme-button:hover {

    transform: translateY(-2px);

    background: #ffffff;

    border-color: #93c5fd;

    box-shadow:
        0 8px 20px
        rgba(37,99,235,0.12);
}


/* ---------- Landing header ---------- */

.landing-header {

    padding:
        14px clamp(20px, 5vw, 72px);

    border-bottom:
        1px solid
        rgba(148,163,184,0.16);

    background:
        rgba(248,250,252,0.84);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.landing-brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        18px;

    letter-spacing:
        -0.035em;
}

.landing-brand-mark {

    width: 36px;
    height: 36px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 8px 20px
        rgba(37,99,235,0.18);
}

.landing-nav a {

    position: relative;
}

.landing-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -6px;

    height: 2px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #06b6d4
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.2s ease;
}

.landing-nav a:hover::after {

    transform:
        scaleX(1);
}


/* ---------- Hero ---------- */

.hero-section {

    min-height:
        calc(100vh - 70px);

    padding-top:
        clamp(60px, 9vw, 120px);

    padding-bottom:
        clamp(60px, 8vw, 100px);
}

.hero-badge {

    border:
        1px solid
        rgba(96,165,250,0.25);

    background:
        linear-gradient(
            135deg,
            rgba(239,246,255,0.9),
            rgba(236,254,255,0.9)
        );

    box-shadow:
        0 8px 24px
        rgba(37,99,235,0.08);
}

.hero-content h1 {

    max-width:
        780px;

    background:
        linear-gradient(
            135deg,
            #0f172a 10%,
            #1d4ed8 58%,
            #7c3aed 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}

.hero-copy {

    max-width:
        670px;

    font-size:
        18px;

    color:
        #64748b;
}

.hero-primary {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 18px 35px
        rgba(37,99,235,0.20);
}

.hero-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 24px 42px
        rgba(37,99,235,0.28);
}

.hero-secondary {

    border:
        1px solid
        #dbe3ee;

    box-shadow:
        0 8px 20px
        rgba(15,23,42,0.04);
}

.hero-secondary:hover {

    transform:
        translateY(-2px);

    border-color:
        #93c5fd;

    color:
        #2563eb;
}


/* ---------- Product preview ---------- */

.dashboard-window {

    position:
        relative;

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 35px 100px
        rgba(15,23,42,0.28);
}

.dashboard-window::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(96,165,250,0.24),
            transparent 38%,
            rgba(167,139,250,0.18)
        );

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite:
        exclude;

    padding:
        1px;
}

.mini-kpi strong {

    font-family:
        "JetBrains Mono",
        monospace;
}

.mini-chart-card {

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.04);
}

.mini-insight {

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.16),
            rgba(124,58,237,0.16)
        );
}

.insight-icon {

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    box-shadow:
        0 8px 20px
        rgba(124,58,237,0.28);
}


/* ---------- Trust ---------- */

.trust-section {

    padding-top:
        5px;

}

.trust-items span {

    padding:
        9px 14px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.7);
}


/* ---------- Section rhythm ---------- */

.landing-section {

    padding-top:
        120px;

    padding-bottom:
        120px;
}

.section-heading h2 {

    max-width:
        780px;

}

.section-heading > p:last-child {

    max-width:
        720px;

}


/* ---------- Feature cards ---------- */

.feature-card {

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        opacity 0.7s ease;
}

.feature-card:hover {

    transform:
        translateY(-7px);

    border-color:
        #bfdbfe;

    box-shadow:
        0 25px 55px
        rgba(15,23,42,0.09);
}

.feature-card:nth-child(2)
.feature-icon {

    background:
        #ecfeff;

    color:
        #0891b2;
}

.feature-card:nth-child(3)
.feature-icon {

    background:
        #f0fdf4;

    color:
        #059669;
}

.feature-card:nth-child(4)
.feature-icon {

    background:
        #fef3c7;

    color:
        #d97706;
}

.feature-card:nth-child(5)
.feature-icon {

    background:
        #f5f3ff;

    color:
        #7c3aed;
}


/* ---------- Differentiation ---------- */

.decision-section {

    position:
        relative;

    overflow:
        hidden;
}

.decision-section::before {

    content: "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        -250px;

    right:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.18),
            transparent 70%
        );

}

.decision-flow > div {

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.decision-flow > div:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,0.08);

    border-color:
        rgba(96,165,250,0.22);
}


/* ---------- Pricing ---------- */

.pricing-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        opacity 0.7s ease;
}

.pricing-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px
        rgba(15,23,42,0.10);
}

.pricing-card.featured {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );
}

.pricing-card.featured::before {

    content: "";

    position:
        absolute;

    inset: 0;

    border-radius:
        inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #7c3aed
        );

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite:
        exclude;

    pointer-events:
        none;
}


/* ---------- Final CTA ---------- */

.final-cta {

    position:
        relative;

    overflow:
        hidden;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,0.22);
}

.final-cta::before {

    content: "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    right:
        -100px;

    top:
        -100px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(34,211,238,0.18),
            transparent 70%
        );
}


/* ---------- Footer ---------- */

.landing-footer {

    border-top:
        1px solid
        rgba(148,163,184,0.10);
}

.footer-links a {

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-links a:hover {

    transform:
        translateX(3px);

}


/* =========================================================
   DARK THEME — PUBLIC SITE
   ========================================================= */

[data-theme="dark"] .landing-page {

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(37,99,235,0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(124,58,237,0.14),
            transparent 28%
        ),
        #070b14;
}

[data-theme="dark"] .landing-header {

    background:
        rgba(7,11,20,0.82);

    border-bottom:
        1px solid
        rgba(148,163,184,0.10);
}

[data-theme="dark"] .landing-brand {

    color:
        #f8fafc;
}

[data-theme="dark"] .landing-nav a {

    color:
        #cbd5e1;
}

[data-theme="dark"] .landing-nav a:hover {

    color:
        #93c5fd;
}

[data-theme="dark"] .landing-theme-button {

    background:
        rgba(15,23,42,0.86);

    border-color:
        #334155;

    color:
        #f8fafc;
}

[data-theme="dark"] .landing-theme-button:hover {

    border-color:
        #60a5fa;

    background:
        #172554;
}

[data-theme="dark"] .landing-login {

    color:
        #e2e8f0;
}

[data-theme="dark"] .hero-badge {

    background:
        rgba(23,37,84,0.72);

    border-color:
        rgba(96,165,250,0.22);

    color:
        #93c5fd;
}

[data-theme="dark"] .hero-content h1 {

    background:
        linear-gradient(
            135deg,
            #f8fafc 5%,
            #60a5fa 55%,
            #a78bfa 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}

[data-theme="dark"] .hero-copy {

    color:
        #94a3b8;
}

[data-theme="dark"] .hero-secondary {

    background:
        #0f172a;

    color:
        #f8fafc;

    border-color:
        #334155;
}

[data-theme="dark"] .hero-secondary:hover {

    border-color:
        #60a5fa;

    color:
        #93c5fd;
}

[data-theme="dark"] .trust-items span {

    background:
        rgba(15,23,42,0.80);

    border-color:
        #1e293b;

    color:
        #94a3b8;
}


/* ---------- Dark feature cards ---------- */

[data-theme="dark"] .feature-card {

    background:
        #0f172a;

    border-color:
        #1e293b;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.22);
}

[data-theme="dark"] .feature-card:hover {

    border-color:
        #334155;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.30);
}

[data-theme="dark"] .feature-card-large {

    background:
        linear-gradient(
            145deg,
            #111c2e,
            #172554 60%,
            #1e1b4b
        );
}

[data-theme="dark"] .feature-card h3 {

    color:
        #f8fafc;
}

[data-theme="dark"] .feature-card p {

    color:
        #94a3b8;
}


/* ---------- Dark security ---------- */

[data-theme="dark"] .security-card {

    background:
        #0f172a;

    border-color:
        #1e293b;
}

[data-theme="dark"] .security-card h3 {

    color:
        #f8fafc;
}

[data-theme="dark"] .security-card p {

    color:
        #94a3b8;
}


/* ---------- Dark pricing ---------- */

[data-theme="dark"] .pricing-section {

    background:
        #0a1020;
}

[data-theme="dark"] .pricing-card {

    background:
        #0f172a;

    border-color:
        #1e293b;
}

[data-theme="dark"] .pricing-card.featured {

    background:
        linear-gradient(
            180deg,
            #0f172a,
            #111c2e
        );
}

[data-theme="dark"] .pricing-card h3 {

    color:
        #f8fafc;
}

[data-theme="dark"] .pricing-card p,
[data-theme="dark"] .pricing-card li {

    color:
        #94a3b8;
}


/* ---------- Dark founder ---------- */

[data-theme="dark"] .founder-section {

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.35);
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

    .landing-actions {

        gap:
            8px;
    }

    .landing-theme-button {

        width:
            38px;

        height:
            38px;
    }

    .landing-cta {

        padding:
            10px 14px;
    }

}
/* =========================================================
   PRODUCT PREVIEW LABEL
   ========================================================= */

.preview-label {

    display: inline-flex;

    padding: 6px 10px;

    margin-bottom: 14px;

    border-radius: 999px;

    background:
        rgba(96, 165, 250, 0.10);

    border:
        1px solid
        rgba(96, 165, 250, 0.16);

    color:
        #93c5fd;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}
/* =========================================================
   PREMIUM AUTHENTICATION
   ========================================================= */

.auth-page {

    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(37,99,235,0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(124,58,237,0.08),
            transparent 28%
        ),
        var(--mf-bg);

}


.auth-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(520px, 0.95fr);

}


.auth-showcase {

    position: relative;

    padding:
        45px clamp(30px, 5vw, 80px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37,99,235,0.40),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(124,58,237,0.28),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #07111f,
            #0f172a 45%,
            #172554
        );

}


.auth-showcase::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -250px;

    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,211,238,0.18),
            transparent 70%
        );

}


.auth-showcase-brand {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

    font-size: 20px;

}


.auth-showcase-mark {

    width: 38px;

    height: 38px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

}


.auth-showcase-content {

    position: relative;

    z-index: 2;

    max-width: 660px;

}


.auth-kicker {

    margin: 0 0 15px;

    color: #60a5fa;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.auth-showcase-content h2 {

    margin: 0 0 22px;

    color: white;

    font-size:
        clamp(42px, 5vw, 72px);

    line-height: 0.98;

    letter-spacing: -0.055em;

}


.auth-showcase-content > p {

    max-width: 610px;

    color: #cbd5e1;

    font-size: 16px;

    line-height: 1.8;

}


.auth-feature-list {

    display: grid;

    gap: 14px;

    margin-top: 34px;

}


.auth-feature-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    max-width: 470px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid
        rgba(255,255,255,0.08);

}


.auth-feature-icon {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(96,165,250,0.13);

    color: #60a5fa;

    font-weight: 800;

    font-size: 12px;

}


.auth-feature-icon.violet {

    background:
        rgba(167,139,250,0.13);

    color: #c4b5fd;

}


.auth-feature-icon.green {

    background:
        rgba(52,211,153,0.13);

    color: #6ee7b7;

}


.auth-feature-item strong {

    display: block;

    color: white;

    font-size: 13px;

}


.auth-feature-item small {

    display: block;

    margin-top: 4px;

    color: #94a3b8;

    font-size: 11px;

}


.auth-showcase-footer {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    color: #64748b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.auth-form-panel {

    position: relative;

    min-width: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        45px clamp(25px, 6vw, 90px);

    background:
        var(--mf-bg);

}


.auth-top-actions {

    position: absolute;

    top: 22px;

    right: 28px;

}


.auth-theme-button {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    border:
        1px solid
        var(--mf-border);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

}


.auth-theme-button:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--mf-blue);

    background:
        var(--mf-blue-soft);

}


.auth-form-content {

    width: 100%;

    max-width: 500px;

}


.auth-mobile-brand {

    display: none;

}


.auth-brand-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--mf-text);

    text-decoration: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

}


.auth-brand-mark {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

}


.premium-auth-form {

    gap: 18px;

}


.auth-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.auth-field label {

    margin: 0;

    color:
        var(--mf-text-soft);

    font-size: 13px;

    font-weight: 700;

}


.auth-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.auth-forgot {

    color:
        var(--mf-blue);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

}


.auth-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

}


.auth-input-icon {

    position: absolute;

    left: 14px;

    z-index: 2;

    color:
        var(--mf-text-faint);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 12px;

    pointer-events: none;

}


.auth-input-wrap input {

    width: 100%;

    min-height: 50px;

    padding:
        13px 45px 13px 38px;

    border:
        1px solid
        var(--mf-border-strong);

    border-radius: 13px;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.auth-input-wrap input:focus {

    border-color:
        var(--mf-blue);

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,0.10);

}


.password-toggle {

    position: absolute;

    right: 7px;

    top: 7px;

    bottom: 7px;

    padding:
        0 10px;

    border: none;

    border-radius: 9px;

    background:
        var(--mf-surface-muted);

    color:
        var(--mf-text-muted);

    cursor: pointer;

    font-size: 10px;

    font-weight: 800;

}


.password-toggle:hover {

    color:
        var(--mf-blue);

}


.field-hint {

    color:
        var(--mf-text-faint);

    font-size: 10px;

    line-height: 1.5;

}


.optional-label {

    margin-left: 5px;

    color:
        var(--mf-text-faint);

    font-weight: 500;

}


.auth-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: -3px;

}


.remember-option,
.terms-option {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color:
        var(--mf-text-muted);

    font-size: 11px;

    line-height: 1.5;

    cursor: pointer;

}


.remember-option input,
.terms-option input {

    margin-top: 2px;

    accent-color:
        var(--mf-blue);

}


.terms-option a {

    color:
        var(--mf-blue);

    text-decoration: none;

    font-weight: 700;

}


.premium-submit {

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}


.submit-arrow {

    transition:
        transform 0.2s ease;

}


.premium-submit:hover .submit-arrow {

    transform:
        translateX(4px);

}


.password-strength {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 15px;

}


.password-strength-bar {

    width: 0%;

    height: 4px;

    border-radius: 99px;

    background:
        var(--mf-border);

    transition:
        width 0.2s ease,
        background 0.2s ease;

}


.password-strength span {

    color:
        var(--mf-text-faint);

    font-size: 10px;

    font-weight: 700;

}


.strength-weak {

    color:
        var(--mf-danger) !important;

}


.strength-fair {

    color:
        var(--mf-warning) !important;

}


.strength-good {

    color:
        var(--mf-blue) !important;

}


.strength-strong {

    color:
        var(--mf-success) !important;

}


.auth-divider {

    margin:
        26px 0 18px;

}


.auth-register {

    text-align: center;

}


@media (max-width: 1000px) {

    .auth-shell {

        grid-template-columns:
            1fr;

    }


    .auth-showcase {

        display: none;

    }


    .auth-form-panel {

        min-height: 100vh;

        padding:
            70px 25px 45px;

    }


    .auth-mobile-brand {

        display: block;

        margin-bottom: 35px;

    }

}


@media (max-width: 600px) {

    .auth-form-panel {

        padding:
            70px 18px 30px;

    }


    .auth-top-actions {

        top: 16px;

        right: 18px;

    }


    .auth-card {

        padding:
            28px 22px;

    }

}
/* =========================================================
   EMAIL VERIFICATION
   ========================================================= */

.verification-email {

    margin:
        20px 0;

    padding:
        14px 16px;

    border:
        1px solid
        var(--mf-border);

    border-radius:
        12px;

    background:
        var(--mf-surface-soft);

    color:
        var(--mf-blue);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        13px;

    font-weight:
        600;

    overflow-wrap:
        anywhere;

}


.verification-note {

    padding:
        12px 14px;

    border:
        1px solid
        var(--mf-warning);

    border-radius:
        12px;

    background:
        var(--mf-warning-soft);

    color:
        var(--mf-text-soft);

    font-size:
        12px;

    line-height:
        1.6;

}


.auth-resend-input {

    width:
        100%;

    padding:
        14px 15px;

    margin-bottom:
        10px;

    border:
        1px solid
        var(--mf-border-strong);

    border-radius:
        12px;

    background:
        var(--mf-surface);

    color:
        var(--mf-text);

}

/* =========================================================
   BILLING & SUBSCRIPTION
   ========================================================= */

.billing-page {
    padding-bottom: 90px;
}

.billing-top-link {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.billing-alert {
    margin-bottom: 24px;
    padding: 15px 18px;
    border-radius: 14px;
    background: var(--mf-blue-soft);
    border: 1px solid color-mix(in srgb, var(--mf-blue) 25%, var(--mf-border));
    color: var(--mf-text-soft);
}

.billing-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 26px;
}

.billing-summary-card {
    background: var(--mf-surface);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    padding: 28px;
    box-shadow: var(--mf-shadow-sm);
    position: relative;
    overflow: hidden;
}

.billing-summary-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mf-blue), var(--mf-cyan), var(--mf-violet));
}

.billing-summary-card h2 {
    margin: 8px 0 10px;
    font-size: 32px;
}

.billing-summary-card p {
    color: var(--mf-text-muted);
    line-height: 1.65;
}

.billing-status {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--mf-success-soft);
    color: var(--mf-success);
}

.billing-status.inactive,
.billing-status.canceled,
.billing-status.cancelled {
    background: var(--mf-surface-muted);
    color: var(--mf-text-muted);
}

.billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.billing-plan-card {
    position: relative;
    background: var(--mf-surface);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    padding: 30px;
    box-shadow: var(--mf-shadow-sm);
    transition: transform var(--mf-normal), box-shadow var(--mf-normal), border-color var(--mf-normal);
}

.billing-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mf-shadow);
    border-color: color-mix(in srgb, var(--mf-blue) 30%, var(--mf-border));
}

.billing-plan-card.featured {
    border-color: color-mix(in srgb, var(--mf-blue) 50%, var(--mf-border));
    box-shadow: 0 20px 50px rgba(37,99,235,0.13);
}

.billing-plan-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--mf-blue-soft);
    color: var(--mf-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.billing-plan-eyebrow {
    color: var(--mf-blue) !important;
    font-size: 11px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.billing-plan-card h2 {
    margin: 12px 0 8px;
    font-size: 34px;
}

.billing-plan-card > p {
    color: var(--mf-text-muted);
    line-height: 1.7;
}

.billing-plan-divider {
    height: 1px;
    background: var(--mf-border);
    margin: 24px 0 16px;
}

.billing-plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.billing-plan-card li {
    padding: 8px 0;
    color: var(--mf-text-soft);
    font-size: 13px;
}

.billing-plan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid var(--mf-border-strong);
    background: var(--mf-surface-muted);
    color: var(--mf-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.billing-plan-button.primary {
    border: none;
    color: white;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-blue-dark));
    box-shadow: 0 10px 25px rgba(37,99,235,0.18);
}

.billing-plan-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 12px;
    background: var(--mf-surface-muted);
    color: var(--mf-text-faint);
    font-size: 12px;
    font-weight: 700;
}

.billing-management-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border-radius: var(--mf-radius-lg);
    background: linear-gradient(135deg, var(--mf-surface), var(--mf-surface-soft));
    border: 1px solid var(--mf-border);
    box-shadow: var(--mf-shadow-sm);
}

.billing-management-card h2 {
    margin: 6px 0 8px;
}

.billing-management-card p:not(.chart-eyebrow) {
    margin: 0;
    color: var(--mf-text-muted);
    line-height: 1.65;
    max-width: 700px;
}

@media (max-width: 1000px) {
    .billing-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .billing-overview-grid {
        grid-template-columns: 1fr;
    }
    .billing-management-card {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =========================================================
   BILLING UI — POLISHED MERIDIAN FINOPS
   Paste this at the END of static/css/style.css
   ========================================================= */

.billing-page {
    max-width: 1380px;
}

.billing-nav-active {
    color: #ffffff !important;
    position: relative;
}

.billing-nav-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: #60a5fa;
}

.billing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 32px;
}

.billing-hero h1 {
    margin: 12px 0 14px;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: var(--mf-text);
}

.billing-hero-copy {
    max-width: 700px;
    margin: 0;
    color: var(--mf-text-muted);
    font-size: 18px;
    line-height: 1.75;
}

.billing-hero-meta {
    min-width: 240px;
    padding: 20px 22px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow-sm);
}

.billing-hero-meta-label {
    display: block;
    margin-bottom: 8px;
    color: var(--mf-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.billing-hero-meta strong {
    display: block;
    color: var(--mf-text);
    font-size: 16px;
}

.billing-hero-meta span:last-child {
    display: block;
    margin-top: 5px;
    color: var(--mf-text-muted);
    font-size: 12px;
}

.billing-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    padding: 15px 18px;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 15px;
    background: var(--mf-blue-soft);
    color: var(--mf-text-soft);
    line-height: 1.55;
}

.billing-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mf-blue);
    color: white;
    font-size: 13px;
    font-weight: 900;
}

.billing-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 24px;
    margin-bottom: 44px;
}

.billing-summary-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow);
}

.billing-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--mf-blue), var(--mf-cyan), var(--mf-violet));
}

.billing-summary-card h2 {
    margin: 8px 0 10px;
    color: var(--mf-text);
    font-size: 34px;
    letter-spacing: -0.04em;
}

.billing-summary-card p {
    color: var(--mf-text-muted);
    line-height: 1.7;
}

.billing-card-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.billing-summary-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.billing-summary-facts > div {
    padding: 14px;
    border: 1px solid var(--mf-border);
    border-radius: 14px;
    background: var(--mf-surface-soft);
}

.billing-summary-facts span {
    display: block;
    margin-bottom: 6px;
    color: var(--mf-text-faint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.billing-summary-facts strong {
    color: var(--mf-text);
    font-size: 13px;
    line-height: 1.45;
}

.billing-summary-copy {
    max-width: 580px;
}

.billing-inline-link {
    display: inline-flex;
    margin-top: 12px;
    color: var(--mf-blue);
    text-decoration: none;
    font-weight: 800;
}

.billing-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 22px;
}

.billing-section-heading h2 {
    margin: 8px 0 0;
    color: var(--mf-text);
    font-size: 34px;
    letter-spacing: -0.04em;
}

.billing-section-heading > p {
    max-width: 500px;
    margin: 0;
    color: var(--mf-text-muted);
    line-height: 1.7;
}

.billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 38px;
}

.billing-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 510px;
    padding: 28px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow-sm);
    transition: transform var(--mf-normal), box-shadow var(--mf-normal), border-color var(--mf-normal);
}

.billing-plan-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--mf-shadow-lg);
    border-color: var(--mf-border-strong);
}

.billing-plan-card.featured {
    border-color: rgba(96, 165, 250, 0.60);
    box-shadow: 0 25px 60px rgba(37, 99, 235, 0.12);
}

.billing-plan-card.current {
    outline: 2px solid rgba(16, 185, 129, 0.35);
    outline-offset: -2px;
}

.billing-plan-badge,
.billing-current-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.billing-plan-badge {
    background: var(--mf-blue-soft);
    color: var(--mf-blue);
}

.billing-current-badge {
    top: 54px;
    background: var(--mf-success-soft);
    color: var(--mf-success);
}

.billing-plan-eyebrow {
    margin: 0;
    color: var(--mf-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.billing-plan-card h3 {
    margin: 10px 0 12px;
    color: var(--mf-text);
    font-size: 38px;
    letter-spacing: -0.045em;
}

.billing-plan-description {
    min-height: 55px;
    margin: 0;
    color: var(--mf-text-muted);
    line-height: 1.7;
}

.billing-plan-divider {
    height: 1px;
    margin: 24px 0 16px;
    background: var(--mf-border);
}

.billing-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-feature-list li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    color: var(--mf-text-soft);
    line-height: 1.55;
}

.billing-feature-list li span {
    color: var(--mf-success);
    font-weight: 900;
}

.billing-plan-button,
.billing-plan-current-action,
.billing-plan-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 13px;
    font-weight: 800;
    text-decoration: none;
}

.billing-plan-button {
    border: 1px solid var(--mf-border-strong);
    background: var(--mf-surface-soft);
    color: var(--mf-text);
}

.billing-plan-button:hover {
    transform: translateY(-2px);
    border-color: var(--mf-blue);
}

.billing-plan-button.primary {
    border: 0;
    color: white;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.20);
}

.billing-plan-current-action {
    justify-content: center;
    border: 1px solid rgba(16, 185, 129, 0.25);
    background: var(--mf-success-soft);
    color: var(--mf-success);
}

.billing-plan-disabled {
    justify-content: center;
    border: 1px dashed var(--mf-border-strong);
    color: var(--mf-text-muted);
    background: var(--mf-surface-soft);
}

.billing-management-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 28px;
    margin-bottom: 30px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg);
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow);
}

.billing-management-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--mf-blue-soft), var(--mf-violet-soft));
    color: var(--mf-blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 19px;
    font-weight: 800;
}

.billing-management-content h2 {
    margin: 6px 0 10px;
    color: var(--mf-text);
    font-size: 27px;
    letter-spacing: -0.03em;
}

.billing-management-content p:last-child {
    margin: 0;
    color: var(--mf-text-muted);
    line-height: 1.7;
}

.billing-management-action {
    min-width: 210px;
}

.billing-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.billing-note-card {
    padding: 22px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    background: var(--mf-surface);
}

.billing-note-index {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--mf-blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 800;
}

.billing-note-card h3 {
    margin: 0 0 8px;
    color: var(--mf-text);
    font-size: 18px;
}

.billing-note-card p {
    margin: 0;
    color: var(--mf-text-muted);
    line-height: 1.7;
}

[data-theme="dark"] .billing-plan-button {
    background: var(--mf-surface-soft);
}

[data-theme="dark"] .billing-alert {
    border-color: rgba(96, 165, 250, 0.30);
}

@media (max-width: 1100px) {
    .billing-hero,
    .billing-overview-grid,
    .billing-management-card {
        grid-template-columns: 1fr;
    }

    .billing-hero-meta {
        min-width: 0;
    }

    .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .billing-plan-card {
        min-height: auto;
    }

    .billing-notes-grid {
        grid-template-columns: 1fr;
    }

    .billing-management-action {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .billing-page {
        padding-left: 18px;
        padding-right: 18px;
    }

    .billing-hero h1 {
        font-size: 48px;
    }

    .billing-summary-facts {
        grid-template-columns: 1fr;
    }

    .billing-section-heading {
        display: block;
    }

    .billing-section-heading > p {
        margin-top: 12px;
    }

    .billing-card-heading-row {
        display: block;
    }

    .billing-status {
        display: inline-flex;
        margin-top: 10px;
    }
}
/* =========================================================
   PUBLIC SITE DARK MODE CONTRAST FIX
   ========================================================= */

/* Core public-section text */
[data-theme="dark"] .landing-section,
[data-theme="dark"] .section-heading,
[data-theme="dark"] .decision-content,
[data-theme="dark"] .final-cta {
    color: var(--mf-text);
}

[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .decision-content h2,
[data-theme="dark"] .final-cta h2 {
    color: var(--mf-text) !important;
}

[data-theme="dark"] .section-heading > p:last-child,
[data-theme="dark"] .decision-content > p {
    color: var(--mf-text-muted) !important;
}

[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .chart-eyebrow,
[data-theme="dark"] .section-heading .section-eyebrow {
    color: #60a5fa !important;
}

/* Platform feature cards */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .feature-card-large {
    color: var(--mf-text);
}

[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .feature-card-large h3,
[data-theme="dark"] .feature-card h4,
[data-theme="dark"] .feature-card-large h4 {
    color: #f8fafc !important;
}

[data-theme="dark"] .feature-card p,
[data-theme="dark"] .feature-card-large p,
[data-theme="dark"] .feature-card li,
[data-theme="dark"] .feature-card-large li {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .feature-card a,
[data-theme="dark"] .feature-card-large a {
    color: #93c5fd !important;
}

[data-theme="dark"] .feature-card .feature-icon,
[data-theme="dark"] .feature-card-large .feature-icon {
    color: #f8fafc;
}

/* Public-site trust pills and labels */
[data-theme="dark"] .trust-items {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .trust-items span {
    color: #cbd5e1 !important;
}

/* Any public page text that was hard-coded for light mode */
[data-theme="dark"] .landing-page .muted,
[data-theme="dark"] .landing-page .subtle,
[data-theme="dark"] .landing-page .description,
[data-theme="dark"] .landing-page small {
    color: #94a3b8 !important;
}

/* Keep headings readable even when older rules set #0f172a */
[data-theme="dark"] .landing-page h1,
[data-theme="dark"] .landing-page h2,
[data-theme="dark"] .landing-page h3,
[data-theme="dark"] .landing-page h4 {
    color: #f8fafc;
}

/* Hero gradient remains intentionally bright in dark mode */
[data-theme="dark"] .hero-content h1 {
    background: linear-gradient(
        135deg,
        #f8fafc 5%,
        #60a5fa 55%,
        #a78bfa 100%
    ) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer readability */
[data-theme="dark"] .landing-footer,
[data-theme="dark"] .landing-footer p,
[data-theme="dark"] .landing-footer span {
    color: #94a3b8;
}

[data-theme="dark"] .footer-links a {
    color: #cbd5e1;
}

[data-theme="dark"] .footer-links a:hover {
    color: #93c5fd;
}


/* =========================================================
   FINAL PUBLIC HOMEPAGE CONTRAST + CTA CLICK FIX
   ========================================================= */

/* 1) Dark-mode hero heading: force readable foreground.
   The earlier CSS used text clipping/gradient rules that could
   leave the heading visually dark on some browsers. */
[data-theme="dark"] .landing-page .hero-content h1 {
    color: #f8fafc !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #f8fafc !important;
}

/* Keep the hero copy readable in dark mode. */
[data-theme="dark"] .landing-page .hero-copy {
    color: #cbd5e1 !important;
}

/* 2) Final CTA decorative glow must never block buttons/links. */
.final-cta::before {
    pointer-events: none !important;
}

.final-cta > * {
    position: relative;
    z-index: 1;
}

.final-cta-actions {
    position: relative;
    z-index: 2;
}

.final-cta-actions a {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

/* 3) Footer is intentionally dark in both themes,
   so the Meridian FinOps wordmark must stay light. */
.landing-footer .landing-brand,
.landing-footer .landing-brand:hover {
    color: #f8fafc !important;
}

.landing-footer .landing-brand span {
    color: inherit;
}

.landing-footer .footer-links a {
    color: #cbd5e1;
}

.landing-footer .footer-links a:hover {
    color: #93c5fd;
}



/* =========================================================
   APP NAV + NOTIFICATION UI FIXES
   ========================================================= */

/* Keep the shared theme control visibly distinct and clickable. */
.mf-theme-button {
    font-size: 17px;
    line-height: 1;
}

/* Primary notification links must keep white text even inside panels,
   where generic .panel a rules would otherwise override the color. */
.notification-center-actions .notification-open-button,
.notification-center-actions a.notification-open-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-blue-dark)) !important;
    border: 0 !important;
    text-decoration: none !important;
    font-weight: 800;
    opacity: 1 !important;
    text-shadow: none;
}

.notification-center-actions .notification-open-button:hover,
.notification-center-actions a.notification-open-button:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mf-blue-dark), var(--mf-violet)) !important;
}

/* Shared account menu remains readable in both themes. */
.mf-dropdown a {
    color: var(--mf-text) !important;
}

/* Better visibility for the menu while preserving its theme-aware surface. */
.mf-dropdown {
    color: var(--mf-text);
}

/* On narrow screens the account menu should stay inside the viewport. */
@media (max-width: 520px) {
    .mf-account-wrap .mf-dropdown {
        right: 0;
        max-width: calc(100vw - 24px);
    }
}
/* =========================================================
   MONTHLY FINOPS REVIEW NAV ITEM
   ========================================================= */

.main-nav a.active,
nav a.active {
    color: #ffffff;
}

.main-nav a[href*="monthly-review"],
nav a[href*="monthly-review"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.main-nav a[href*="monthly-review"] span:first-child,
nav a[href*="monthly-review"] span:first-child {
    font-size: 13px;
    opacity: .9;
}

.main-nav a[href*="monthly-review"]:hover,
nav a[href*="monthly-review"]:hover {
    color: #ffffff;
}


/* =========================================================
   MONTHLY FINOPS REVIEW
   ========================================================= */

.monthly-review-page {
    width: min(1220px, calc(100% - 42px));
    margin: 0 auto;
    padding: 42px 0 82px;
}

.review-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.review-eyebrow,
.review-card-eyebrow {
    margin: 0 0 8px;
    color: var(--mf-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.review-hero h1,
.review-gate h1 {
    max-width: 820px;
    margin: 0;
    color: var(--mf-text);
    font-size: clamp(40px, 5.3vw, 68px);
    line-height: .99;
    letter-spacing: -.055em;
}

.review-hero > div:first-child > p:last-child,
.review-gate > p:not(.review-eyebrow) {
    max-width: 750px;
    margin: 17px 0 0;
    color: var(--mf-text-muted);
    font-size: 15px;
    line-height: 1.7;
}

.review-period {
    flex: 0 0 auto;
    padding: 15px 17px;
    border: 1px solid var(--mf-border);
    border-radius: 17px;
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow-sm);
}

.review-period span,
.review-period strong,
.review-period small {
    display: block;
}

.review-period span {
    color: var(--mf-text-faint);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.review-period strong {
    margin-top: 6px;
    color: var(--mf-text);
    font-size: 12px;
}

.review-period small {
    margin-top: 4px;
    color: var(--mf-blue);
    font-size: 10px;
    font-weight: 800;
}

.review-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.review-kpi,
.review-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mf-border);
    border-radius: 23px;
    background: var(--mf-surface);
    box-shadow: var(--mf-shadow-sm);
}

.review-kpi {
    padding: 21px;
}

.review-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--mf-blue), var(--mf-violet));
}

.review-kpi span,
.review-kpi small {
    display: block;
}

.review-kpi span {
    color: var(--mf-text-muted);
    font-size: 11px;
    font-weight: 800;
}

.review-kpi strong {
    display: block;
    margin: 10px 0 6px;
    color: var(--mf-text);
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: 26px;
    letter-spacing: -.04em;
}

.review-kpi small {
    color: var(--mf-text-faint);
    font-size: 10px;
    line-height: 1.45;
}

.review-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
    margin-bottom: 18px;
}

.review-card {
    padding: 24px;
}

.review-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.review-card h2 {
    margin: 0;
    color: var(--mf-text);
    font-size: 22px;
    letter-spacing: -.035em;
}

.review-heading-copy {
    max-width: 680px;
    margin: 7px 0 0;
    color: var(--mf-text-muted);
    font-size: 11px;
    line-height: 1.6;
}

.review-change {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.review-change-up {
    color: var(--mf-danger);
    background: var(--mf-danger-soft);
}

.review-change-down {
    color: var(--mf-success);
    background: var(--mf-success-soft);
}

.review-change-flat {
    color: var(--mf-blue);
    background: var(--mf-blue-soft);
}

.review-snapshot-list,
.review-rank-list,
.review-recommendation-list {
    display: grid;
    gap: 9px;
}

.review-snapshot-row,
.review-rank-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--mf-border);
    border-radius: 14px;
    background: var(--mf-surface-soft);
}

.review-snapshot-row {
    grid-template-columns: 1fr auto;
}

.review-snapshot-row strong,
.review-snapshot-row small {
    display: block;
}

.review-snapshot-row strong {
    color: var(--mf-text);
    font-size: 12px;
}

.review-snapshot-row small {
    margin-top: 4px;
    color: var(--mf-text-faint);
    font-size: 9px;
}

.review-score-card {
    background:
        linear-gradient(
            145deg,
            var(--mf-surface),
            var(--mf-blue-soft)
        );
}

.review-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin: 18px 0;
}

.review-score-grid > div {
    padding: 16px;
    border: 1px solid var(--mf-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--mf-surface) 78%, transparent);
}

.review-score-grid span,
.review-score-grid strong {
    display: block;
}

.review-score-grid span {
    color: var(--mf-text-faint);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 850;
}

.review-score-grid strong {
    margin-top: 7px;
    color: var(--mf-text);
    font-size: 21px;
}

.review-muted {
    margin: 0;
    color: var(--mf-text-muted);
    font-size: 10px;
    line-height: 1.6;
}

.review-rank-row {
    grid-template-columns: 28px 1fr auto;
}

.review-rank-row > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: var(--mf-blue-soft);
    color: var(--mf-blue);
    font-size: 9px;
    font-weight: 900;
}

.review-rank-row strong,
.review-rank-row b {
    color: var(--mf-text);
    font-size: 11px;
}

.review-ai-card {
    margin-bottom: 18px;
}

.review-recommendation {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--mf-border);
    border-radius: 16px;
    background: var(--mf-surface-soft);
}

.review-recommendation > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
    color: white;
    font-size: 9px;
    font-weight: 900;
}

.review-recommendation strong {
    color: var(--mf-text);
    font-size: 12px;
}

.review-recommendation p {
    margin: 5px 0 0;
    color: var(--mf-text-muted);
    font-size: 11px;
    line-height: 1.6;
}

.review-recommendation small {
    display: block;
    margin-top: 6px;
    color: var(--mf-success);
    font-size: 9px;
}

.review-empty,
.review-gate {
    max-width: 850px;
    margin: 20px auto 0;
    padding: 45px;
    border: 1px solid var(--mf-border);
    border-radius: 27px;
    background:
        radial-gradient(
            circle at top right,
            var(--mf-blue-soft),
            transparent 42%
        ),
        var(--mf-surface);
    box-shadow: var(--mf-shadow-sm);
}

.review-gate {
    text-align: left;
}

.review-gate-icon,
.review-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 19px;
    border-radius: 17px;
    background: var(--mf-blue-soft);
    color: var(--mf-blue);
    font-size: 22px;
    font-weight: 900;
}

.review-gate-plan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 23px 0 17px;
    padding: 9px 12px;
    border-radius: 999px;
    background: var(--mf-surface-soft);
    color: var(--mf-text-muted);
    font-size: 10px;
    font-weight: 800;
}

.review-gate-plan strong {
    color: var(--mf-blue);
}

.review-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 17px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-violet));
    color: #fff !important;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.review-primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .25);
}

.review-empty {
    text-align: center;
}

.review-empty-icon {
    margin-left: auto;
    margin-right: auto;
}

.review-empty h2 {
    margin: 0;
    color: var(--mf-text);
    font-size: 24px;
}

.review-empty p {
    max-width: 540px;
    margin: 9px auto 18px;
    color: var(--mf-text-muted);
    font-size: 12px;
    line-height: 1.7;
}

.review-methodology {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 17px;
}

.review-methodology-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 10px;
    background: var(--mf-surface-muted);
    color: var(--mf-text-muted);
    font-size: 11px;
    font-weight: 900;
}

.review-methodology strong,
.review-methodology p {
    display: block;
}

.review-methodology strong {
    color: var(--mf-text);
    font-size: 11px;
}

.review-methodology p {
    margin: 4px 0 0;
    color: var(--mf-text-muted);
    font-size: 10px;
    line-height: 1.55;
}

.review-empty-inline {
    padding: 20px;
    border-radius: 14px;
    border: 1px dashed var(--mf-border-strong);
    color: var(--mf-text-muted);
    background: var(--mf-surface-soft);
    font-size: 11px;
}

@media (max-width: 950px) {
    .review-kpi-grid,
    .review-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .monthly-review-page {
        width: min(100% - 28px, 1220px);
        padding-top: 28px;
    }

    .review-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .review-kpi-grid,
    .review-grid,
    .review-score-grid {
        grid-template-columns: 1fr;
    }

    .review-card,
    .review-gate,
    .review-empty {
        padding: 20px;
    }

    .review-snapshot-row {
        grid-template-columns: 1fr;
    }
}