/* ==========================================================================
   Neroxa AI — Premium Design System
   Brand: Futuristic · Intelligent · Premium · Minimal · Enterprise-grade
   Palette: Deep navy · Electric blue · Cyan · White · Purple/blue gradients
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Brand palette */
    --nx-navy-900: #060B18;
    --nx-navy-800: #0A1226;
    --nx-navy-700: #0E1B36;
    --nx-navy-600: #14224A;
    --nx-navy-500: #1B2D63;
    --nx-blue-500: #2B6CF6;
    --nx-blue-400: #3B82F6;
    --nx-electric:  #1E6BFF;
    --nx-cyan:      #22D3EE;
    --nx-cyan-soft: #67E8F9;
    --nx-purple:    #7C3AED;
    --nx-purple-soft:#A78BFA;
    --nx-white:     #FFFFFF;
    --nx-text:      #E8EEFB;
    --nx-text-dim:  #94A3C4;
    --nx-text-muted:#64748B;

    /* Functional */
    --nx-success: #10B981;
    --nx-warning: #F59E0B;
    --nx-danger:  #EF4444;
    --nx-info:    #22D3EE;

    /* Surfaces (light app shell) */
    --nx-app-bg:        #F1F5FB;
    --nx-surface:       #FFFFFF;
    --nx-surface-2:     #F8FAFF;
    --nx-border:        #E2E8F5;
    --nx-border-soft:   #EEF2FB;

    /* Sidebar */
    --sidebar-width: 264px;
    --sidebar-bg: linear-gradient(180deg, #0A1226 0%, #0E1B36 55%, #0A1226 100%);

    /* Gradients */
    --nx-gradient-primary: linear-gradient(135deg, #1E6BFF 0%, #7C3AED 100%);
    --nx-gradient-cyan:    linear-gradient(135deg, #22D3EE 0%, #2B6CF6 100%);
    --nx-gradient-navy:    linear-gradient(135deg, #0A1226 0%, #14224A 100%);
    --nx-gradient-glow:    radial-gradient(circle at 30% 20%, rgba(34,211,238,0.15), transparent 60%);

    /* Glass */
    --nx-glass-bg: rgba(255, 255, 255, 0.65);
    --nx-glass-blur: 18px;
    --nx-glass-border: rgba(255, 255, 255, 0.55);

    /* Radii */
    --nx-radius-sm: 10px;
    --nx-radius:    16px;
    --nx-radius-lg: 22px;

    /* Shadows */
    --nx-shadow-sm: 0 1px 2px rgba(10,18,38,0.06), 0 1px 3px rgba(10,18,38,0.04);
    --nx-shadow:    0 4px 16px rgba(10,18,38,0.08), 0 1px 3px rgba(10,18,38,0.04);
    --nx-shadow-lg: 0 12px 40px rgba(10,18,38,0.12), 0 4px 12px rgba(10,18,38,0.06);
    --nx-shadow-glow: 0 0 0 1px rgba(43,108,246,0.10), 0 8px 30px rgba(43,108,246,0.18);

    /* Typography */
    --nx-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --nx-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

    /* Bootstrap variable bridge */
    --bs-primary: #1E6BFF;
    --bs-primary-rgb: 30,107,255;
    --bs-body-bg: var(--nx-app-bg);
    --bs-body-color: #0E1B36;
    --bs-border-color: var(--nx-border);
    --bs-link-color: var(--nx-electric);
    --bs-link-hover-color: var(--nx-purple);
    --bs-border-radius: var(--nx-radius);
    --bs-border-radius-sm: var(--nx-radius-sm);
    --bs-border-radius-lg: var(--nx-radius-lg);
}

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(124,58,237,0.06), transparent 60%),
        radial-gradient(1000px 500px at -10% 10%, rgba(34,211,238,0.07), transparent 55%),
        var(--nx-app-bg);
    font-family: var(--nx-font);
    color: var(--bs-body-color);
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--nx-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--nx-navy-700);
}

a { transition: color .15s ease; }

::selection { background: rgba(30,107,255,0.18); color: var(--nx-navy-800); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(30,107,255,0.22); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(30,107,255,0.4); background-clip: padding-box; }

/* ==========================================================================
   Layout — Sidebar
   ========================================================================== */
.wrapper { display: flex; width: 100%; }

#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    position: fixed;
    top: 0; left: 0;
    z-index: 1030;
    transition: margin .3s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 4px 0 30px rgba(6,11,24,0.25);
}
#sidebar::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(400px 200px at 80% 0%, rgba(34,211,238,0.10), transparent 70%),
        radial-gradient(360px 220px at 0% 100%, rgba(124,58,237,0.12), transparent 70%);
    pointer-events: none;
}
#sidebar.active { margin-left: calc(-1 * var(--sidebar-width)); }

#content {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin .3s cubic-bezier(.4,0,.2,1);
}
#content.active { width: 100%; margin-left: 0; }

#sidebar .sidebar-header {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
#sidebar .sidebar-header h5 {
    font-family: var(--nx-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, #FFFFFF, #67E8F9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#sidebar .sidebar-header h5 i {
    -webkit-text-fill-color: initial;
    color: var(--nx-cyan);
    filter: drop-shadow(0 0 6px rgba(34,211,238,0.6));
    margin-right: 4px;
}
#sidebar .sidebar-header small { color: var(--nx-text-dim) !important; font-weight: 500; }

#sidebar ul.components { padding: 10px 0; }
#sidebar ul.components > li { position: relative; }

#sidebar ul.components > li > a {
    padding: 11px 20px;
    display: flex;
    align-items: center;
    color: var(--nx-text-dim);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all .18s ease;
    border-left: 3px solid transparent;
    position: relative;
}
#sidebar ul.components > li > a:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}
#sidebar ul.components > li > a i {
    margin-right: 12px;
    width: 18px;
    text-align: center;
    font-size: 1rem;
    transition: all .18s ease;
}
#sidebar ul.components > li > a:hover i { color: var(--nx-cyan); }

#sidebar ul.components > li.active > a {
    color: #fff;
    background: linear-gradient(90deg, rgba(30,107,255,0.22), rgba(30,107,255,0.02));
    border-left-color: var(--nx-cyan);
}
#sidebar ul.components > li.active > a i {
    color: var(--nx-cyan);
    filter: drop-shadow(0 0 6px rgba(34,211,238,0.55));
}
#sidebar ul.components > li.active > a::after {
    content: "";
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--nx-cyan);
    box-shadow: 0 0 10px rgba(34,211,238,0.8);
}

.sidebar-section {
    padding: 16px 20px 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(148,163,196,0.55);
    font-weight: 700;
}

#sidebar .sidebar-menu::-webkit-scrollbar { width: 6px; }
#sidebar .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* ==========================================================================
   Topbar — Glassmorphism
   ========================================================================== */
.navbar.navbar-light.bg-white {
    background: var(--nx-glass-bg) !important;
    backdrop-filter: blur(var(--nx-glass-blur));
    -webkit-backdrop-filter: blur(var(--nx-glass-blur));
    border-bottom: 1px solid var(--nx-border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, var(--nx-shadow-sm) !important;
    position: sticky;
    top: 0;
    z-index: 1020;
}

#sidebarToggle {
    border: 1px solid var(--nx-border) !important;
    background: var(--nx-surface) !important;
    color: var(--nx-navy-600) !important;
    border-radius: var(--nx-radius-sm) !important;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .18s ease;
}
#sidebarToggle:hover {
    border-color: var(--nx-blue-400) !important;
    color: var(--nx-electric) !important;
    box-shadow: 0 0 0 3px rgba(30,107,255,0.10);
}

.navbar .input-group {
    border-radius: var(--nx-radius-sm);
    box-shadow: var(--nx-shadow-sm);
}
.navbar .input-group-text {
    background: var(--nx-surface) !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-text-muted) !important;
}
.navbar .form-control {
    border-color: var(--nx-border) !important;
    background: var(--nx-surface) !important;
}
.navbar .form-control::placeholder { color: var(--nx-text-muted); }
.navbar .form-control:focus {
    border-color: var(--nx-blue-400) !important;
    box-shadow: 0 0 0 3px rgba(30,107,255,0.12) !important;
}

.navbar .btn-light {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-navy-600) !important;
    border-radius: var(--nx-radius-sm) !important;
    transition: all .18s ease;
}
.navbar .btn-light:hover {
    border-color: var(--nx-blue-400) !important;
    color: var(--nx-electric) !important;
}

/* Avatar */
.navbar .bg-primary.rounded-circle {
    background: var(--nx-gradient-primary) !important;
    box-shadow: 0 2px 8px rgba(30,107,255,0.35);
    font-weight: 700;
}

/* Dropdown menus */
.dropdown-menu {
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    box-shadow: var(--nx-shadow-lg) !important;
    padding: 6px !important;
    background: var(--nx-surface) !important;
}
.dropdown-item {
    border-radius: var(--nx-radius-sm);
    padding: 8px 12px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nx-navy-600) !important;
    transition: all .15s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--nx-surface-2) !important;
    color: var(--nx-electric) !important;
}
.dropdown-item.text-danger:hover { background: rgba(239,68,68,0.08) !important; }
.dropdown-divider { border-color: var(--nx-border-soft) !important; margin: 6px 0 !important; }
.dropdown-item-text { color: var(--nx-text-muted) !important; }

/* ==========================================================================
   Cards — Rounded modern + glass
   ========================================================================== */
.card {
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    background: var(--nx-surface) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
.card:hover { box-shadow: var(--nx-shadow) !important; }

.card-header {
    background: var(--nx-surface-2) !important;
    border-bottom: 1px solid var(--nx-border-soft) !important;
    border-radius: var(--nx-radius) var(--nx-radius) 0 0 !important;
    padding: 14px 18px !important;
}
.card-header.bg-white { background: var(--nx-surface-2) !important; }
.card-header h6, .card-header .h6 {
    font-weight: 600;
    color: var(--nx-navy-700);
    font-size: 0.95rem;
}
.card-body { padding: 18px !important; }
.card-footer { background: var(--nx-surface-2) !important; border-top: 1px solid var(--nx-border-soft) !important; }

/* Stat cards */
.stat-card {
    border-left: 4px solid var(--nx-electric) !important;
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: "";
    position: absolute; right: -20px; top: -20px;
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(30,107,255,0.10), transparent 70%);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--nx-shadow) !important; }
.stat-card .stat-icon { font-size: 1.9rem; opacity: 0.28; }
.stat-card .stat-value {
    font-family: var(--nx-font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--nx-navy-700);
    letter-spacing: -0.02em;
}
.stat-card .stat-label { font-size: 0.78rem; color: var(--nx-text-muted); font-weight: 500; }

/* ==========================================================================
   Dashboard polish — empty states, page headers, table refinements
   ========================================================================== */
.nx-page-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:1.25rem; }
.nx-page-head h3 { margin:0; font-weight:700; color:var(--nx-navy-700); }
.nx-page-head .text-muted { margin:0; }

/* Empty state */
.nx-empty {
    text-align:center; padding:2rem 1rem; color:var(--nx-text-muted);
}
.nx-empty i { font-size:2.2rem; opacity:.35; display:block; margin-bottom:.5rem; color:var(--nx-navy-500); }
.nx-empty h6 { color:var(--nx-navy-700); font-weight:600; margin-bottom:.25rem; }
.nx-empty p { font-size:.875rem; margin:0 auto .75rem; max-width:380px; }
.nx-empty .btn { padding:.25rem .75rem; font-size:.8rem; }

/* Card header polish */
.card-header.bg-white { background:#fff !important; border-bottom:1px solid var(--nx-border-soft) !important; }
.card-header h6 { font-weight:600; color:var(--nx-navy-700); }

/* Table polish */
.table > :not(caption) > * > * { padding:.75rem 1rem; vertical-align:middle; }
.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--nx-text-muted); font-weight:600; }
.table-hover > tbody > tr { transition: background .15s ease; }
.table-hover > tbody > tr:hover { background:rgba(30,107,255,0.04) !important; }

/* List group polish */
.list-group-item { border-color:var(--nx-border-soft) !important; transition: background .15s ease; }
.list-group-item:hover { background:rgba(30,107,255,0.04); }

/* Filter card */
.nx-filter-card .form-label { font-weight:500; color:var(--nx-navy-600); }

/* Table empty state */
.nx-empty-row td { padding:2.5rem 1rem !important; text-align:center; }
.nx-empty-row i { font-size:2.2rem; opacity:.3; color:var(--nx-navy-500); display:block; margin-bottom:.5rem; }
.nx-empty-row p { color:var(--nx-text-muted); margin:0 0 .5rem; }
.nx-empty-row a, .nx-empty-row button { font-weight:600; padding:.25rem .75rem; font-size:.8rem; }

/* ==========================================================================
   Buttons — Premium gradient primary
   ========================================================================== */
.btn { border-radius: var(--nx-radius-sm) !important; font-weight: 600; letter-spacing: -0.01em; transition: all .18s ease; }

.btn-primary {
    background: var(--nx-gradient-primary) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(30,107,255,0.28);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.08);
    box-shadow: 0 4px 16px rgba(30,107,255,0.40);
    color: #fff !important;
}
.btn-primary:active { transform: translateY(1px); }

.btn-success {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.28);
}
.btn-success:hover { filter: brightness(1.08); box-shadow: 0 4px 16px rgba(16,185,129,0.38); }

.btn-danger {
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}
.btn-danger:hover { filter: brightness(1.08); }

.btn-warning {
    background: linear-gradient(135deg, #F59E0B, #D97706) !important;
    border: none !important;
    color: #fff !important;
}
.btn-info {
    background: var(--nx-gradient-cyan) !important;
    border: none !important;
    color: #fff !important;
}

.btn-secondary {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-navy-600) !important;
}
.btn-secondary:hover {
    background: var(--nx-surface-2) !important;
    border-color: var(--nx-blue-400) !important;
    color: var(--nx-electric) !important;
}

.btn-light {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-navy-600) !important;
}
.btn-light:hover { border-color: var(--nx-blue-400) !important; color: var(--nx-electric) !important; }

.btn-link { color: var(--nx-electric) !important; font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--nx-purple) !important; }

.btn-outline-primary {
    border-color: var(--nx-electric) !important;
    color: var(--nx-electric) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--nx-gradient-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 5px 10px !important;
    border-radius: 99px !important;
    font-size: 0.7rem;
}
.badge.bg-primary { background: var(--nx-gradient-primary) !important; }
.badge.bg-success { background: linear-gradient(135deg,#10B981,#059669) !important; }
.badge.bg-danger  { background: linear-gradient(135deg,#EF4444,#DC2626) !important; }
.badge.bg-warning { background: linear-gradient(135deg,#F59E0B,#D97706) !important; color:#fff !important; }
.badge.bg-info    { background: var(--nx-gradient-cyan) !important; }
.badge.bg-secondary { background: var(--nx-navy-500) !important; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table { color: var(--nx-navy-600); --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 13px 18px; border-color: var(--nx-border-soft); }
.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: var(--nx-text-muted);
    border-bottom: 1px solid var(--nx-border) !important;
    background: var(--nx-surface-2);
}
.table-light { background: var(--nx-surface-2) !important; color: var(--nx-text-muted) !important; }
.table-hover > tbody > tr { transition: background .12s ease; }
.table-hover > tbody > tr:hover > * { background: var(--nx-surface-2) !important; }
.table > :not(:first-child) { border-top: 1px solid var(--nx-border-soft); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--nx-navy-600); margin-bottom: 6px; }
.form-control, .form-select {
    border-color: var(--nx-border) !important;
    border-radius: var(--nx-radius-sm) !important;
    padding: 9px 13px !important;
    font-size: 0.9rem;
    background: var(--nx-surface) !important;
    color: var(--nx-navy-700) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--nx-blue-400) !important;
    box-shadow: 0 0 0 3px rgba(30,107,255,0.12) !important;
}
.form-control::placeholder { color: var(--nx-text-muted); }
.input-group-text {
    border-color: var(--nx-border) !important;
    background: var(--nx-surface-2) !important;
    color: var(--nx-text-muted) !important;
    border-radius: var(--nx-radius-sm) !important;
}
.form-check-input { border-color: var(--nx-border) !important; }
.form-check-input:checked { background-color: var(--nx-electric) !important; border-color: var(--nx-electric) !important; }
.form-check-input:focus { border-color: var(--nx-blue-400) !important; box-shadow: 0 0 0 3px rgba(30,107,255,0.12) !important; }
.invalid-feedback { font-size: 0.78rem; font-weight: 500; }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
    border: 1px solid transparent;
    border-radius: var(--nx-radius) !important;
    padding: 14px 18px !important;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--nx-shadow-sm);
    backdrop-filter: blur(8px);
}
.alert-success { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.25); color: #047857; }
.alert-danger  { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.25); color: #B91C1C; }
.alert-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.28); color: #B45309; }
.alert-info    { background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.28); color: #0E7490; }
.alert .btn-close { padding: 14px !important; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content {
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-lg) !important;
    background: var(--nx-surface) !important;
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--nx-border-soft) !important; padding: 18px 22px !important; }
.modal-header .modal-title { font-family: var(--nx-font-display); font-weight: 600; color: var(--nx-navy-700); }
.modal-body { padding: 22px !important; }
.modal-footer { border-top: 1px solid var(--nx-border-soft) !important; padding: 16px 22px !important; background: var(--nx-surface-2); }
.modal-backdrop.show { opacity: 0.45; }

/* ==========================================================================
   List groups
   ========================================================================== */
.list-group-item {
    border-color: var(--nx-border-soft) !important;
    padding: 13px 18px !important;
    transition: background .12s ease;
}
.list-group-flush .list-group-item { border-width: 1px 0; }
.list-group-item:hover { background: var(--nx-surface-2); }
.fw-semibold { color: var(--nx-navy-700); }

/* ==========================================================================
   Kanban
   ========================================================================== */
.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kanban-column {
    min-width: 280px; flex-shrink: 0;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: 14px;
}
.kanban-column-header { font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; color: var(--nx-navy-700); }
.kanban-card {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    padding: 12px; margin-bottom: 8px; cursor: move;
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow .2s, transform .2s;
}
.kanban-card:hover { box-shadow: var(--nx-shadow); transform: translateY(-1px); }
.kanban-card.dragging { opacity: 0.5; }

/* ==========================================================================
   Chat
   ========================================================================== */
.chat-inbox { height: calc(100vh - 140px); }
.chat-list { overflow-y: auto; height: 100%; }
.chat-messages { overflow-y: auto; height: calc(100% - 60px); }
.chat-bubble { max-width: 70%; padding: 9px 15px; border-radius: 16px; margin-bottom: 8px; font-size: 0.9rem; }
.chat-bubble.outbound {
    background: var(--nx-gradient-primary);
    color: #fff; margin-left: auto;
    box-shadow: 0 2px 10px rgba(30,107,255,0.25);
}
.chat-bubble.inbound { background: var(--nx-surface-2); border: 1px solid var(--nx-border); }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { gap: 4px; }
.page-link {
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-navy-600) !important;
    border-radius: var(--nx-radius-sm) !important;
    padding: 7px 12px !important;
    font-weight: 600;
    background: var(--nx-surface) !important;
}
.page-link:hover { background: var(--nx-surface-2) !important; color: var(--nx-electric) !important; border-color: var(--nx-blue-400) !important; }
.page-item.active .page-link { background: var(--nx-gradient-primary) !important; border-color: transparent !important; color: #fff !important; }
.page-item.disabled .page-link { color: var(--nx-text-muted) !important; opacity: 0.6; }

/* ==========================================================================
   Utility classes — Brand system
   ========================================================================== */

/* Glassmorphism panel */
.nx-glass {
    background: var(--nx-glass-bg);
    backdrop-filter: blur(var(--nx-glass-blur));
    -webkit-backdrop-filter: blur(var(--nx-glass-blur));
    border: 1px solid var(--nx-glass-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow);
}

/* Gradient text */
.nx-gradient-text {
    background: var(--nx-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nx-gradient-text-cyan {
    background: var(--nx-gradient-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glow */
.nx-glow { box-shadow: var(--nx-shadow-glow); }
.nx-glow-cyan { box-shadow: 0 0 0 1px rgba(34,211,238,0.18), 0 8px 30px rgba(34,211,238,0.22); }

/* AI orb — soft glowing element */
.nx-ai-orb {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--nx-gradient-cyan);
    box-shadow: 0 0 18px rgba(34,211,238,0.55), inset 0 0 12px rgba(255,255,255,0.4);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    animation: nx-pulse 2.6s ease-in-out infinite;
}
.nx-ai-orb-sm { width: 28px; height: 28px; font-size: 0.85rem; }

/* Gradient surface */
.nx-gradient-surface {
    background: var(--nx-gradient-navy);
    color: var(--nx-text);
    border-radius: var(--nx-radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}
.nx-gradient-surface::before {
    content: ""; position: absolute; inset: 0;
    background: var(--nx-gradient-glow);
    pointer-events: none;
}
.nx-gradient-surface > * { position: relative; z-index: 1; }

/* Hero card — premium gradient banner */
.nx-hero {
    background: linear-gradient(120deg, #0A1226 0%, #14224A 50%, #1B2D63 100%);
    color: #fff;
    border-radius: var(--nx-radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--nx-shadow-lg);
}
.nx-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(500px 200px at 90% 0%, rgba(34,211,238,0.20), transparent 70%),
        radial-gradient(400px 200px at 10% 100%, rgba(124,58,237,0.22), transparent 70%);
    pointer-events: none;
}
.nx-hero > * { position: relative; z-index: 1; }
.nx-hero h2, .nx-hero h3, .nx-hero h4 { color: #fff; }
.nx-hero .text-muted { color: var(--nx-text-dim) !important; }

/* Section title */
.nx-section-title {
    font-family: var(--nx-font-display);
    font-weight: 700;
    color: var(--nx-navy-700);
    letter-spacing: -0.02em;
}

/* Soft icon chip */
.nx-icon-chip {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(30,107,255,0.12), rgba(124,58,237,0.10));
    color: var(--nx-electric);
    font-size: 1.2rem;
}
.nx-icon-chip-cyan {
    background: linear-gradient(135deg, rgba(34,211,238,0.14), rgba(43,108,246,0.10));
    color: var(--nx-cyan);
}

/* Divider with gradient */
.nx-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nx-border), transparent);
    border: none;
    margin: 18px 0;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes nx-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(34,211,238,0.45), inset 0 0 12px rgba(255,255,255,0.4); }
    50%      { box-shadow: 0 0 28px rgba(34,211,238,0.7), inset 0 0 14px rgba(255,255,255,0.5); }
}
@keyframes nx-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nx-fade-up { animation: nx-fade-up .4s ease both; }

/* ==========================================================================
   Guest / Auth pages
   ========================================================================== */
body.bg-light {
    background:
        radial-gradient(900px 500px at 80% 0%, rgba(124,58,237,0.12), transparent 60%),
        radial-gradient(800px 500px at 10% 100%, rgba(34,211,238,0.12), transparent 60%),
        var(--nx-navy-800) !important;
    min-height: 100vh;
}
body.bg-light h3, body.bg-light .text-primary { color: #fff !important; }
body.bg-light .text-primary i { color: var(--nx-cyan) !important; filter: drop-shadow(0 0 8px rgba(34,211,238,0.6)); }
body.bg-light .text-muted { color: var(--nx-text-dim) !important; }
body.bg-light .card {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(6,11,24,0.5) !important;
}
body.bg-light .card .form-label { color: var(--nx-text) !important; }
body.bg-light .card .form-control,
body.bg-light .card .form-select {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}
body.bg-light .card .form-control::placeholder { color: rgba(232,238,251,0.4); }
body.bg-light .card .form-control:focus {
    border-color: var(--nx-cyan) !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,0.18) !important;
}
body.bg-light .card .form-check-label { color: var(--nx-text) !important; }
body.bg-light .card a { color: var(--nx-cyan) !important; }
body.bg-light .card .text-danger { color: #FCA5A5 !important; }
body.bg-light .alert { color: var(--nx-text); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    #sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
    #sidebar.active { margin-left: 0; }
    #content { width: 100%; margin-left: 0; }
    main.container-fluid { padding: 16px !important; }
}

/* ==========================================================================
   Public Website — Navbar, Hero, Sections, Footer
   ========================================================================== */
.nx-navbar {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nx-border-soft);
    box-shadow: var(--nx-shadow-sm);
    padding: 10px 0;
}
.nx-navbar .navbar-brand { font-family: var(--nx-font-display); font-weight: 700; }
.nx-brand-text {
    background: linear-gradient(90deg, var(--nx-navy-700), var(--nx-blue-500));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nx-navbar .nav-link {
    color: var(--nx-navy-600) !important; font-weight: 500;
    padding: 6px 14px !important; border-radius: 8px; transition: all .15s ease;
}
.nx-navbar .nav-link:hover { color: var(--nx-electric) !important; background: rgba(30,107,255,0.06); }
.nx-navbar .nav-link.active {
    color: var(--nx-electric) !important;
    background: rgba(30,107,255,0.10);
    font-weight: 600;
}

.nx-hero {
    padding: 60px 0 50px;
    background: radial-gradient(800px 400px at 90% 10%, rgba(34,211,238,0.08), transparent 60%),
                radial-gradient(700px 400px at 0% 90%, rgba(124,58,237,0.07), transparent 60%);
}
.nx-hero-sm { padding: 50px 0 40px; }
.min-vh-80 { min-height: 80vh; }
.nx-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(30,107,255,0.08); color: var(--nx-electric);
    padding: 6px 14px; border-radius: 99px; font-size: .8rem; font-weight: 600;
    border: 1px solid rgba(30,107,255,0.12);
}
.nx-gradient-text {
    background: linear-gradient(135deg, var(--nx-electric), var(--nx-purple));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.nx-hero-card {
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-lg); overflow: hidden;
}
.nx-hero-card-header {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px;
    background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-border-soft);
}
.nx-dot { width: 10px; height: 10px; border-radius: 50%; }
.nx-hero-card-body { padding: 20px; }
.nx-mini-stat {
    background: var(--nx-surface-2); border-radius: var(--nx-radius-sm);
    padding: 12px; text-align: center; border: 1px solid var(--nx-border-soft);
}
.nx-mini-val { font-size: 1.3rem; font-weight: 700; color: var(--nx-navy-700); }
.nx-mini-label { font-size: .7rem; color: var(--nx-text-muted); }
.nx-hero-chart {
    display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 12px;
    background: var(--nx-surface-2); border-radius: var(--nx-radius-sm); margin-bottom: 12px;
}
.nx-bar {
    flex: 1; background: linear-gradient(180deg, var(--nx-blue-400), var(--nx-electric));
    border-radius: 4px 4px 0 0; min-height: 8px; transition: height .3s ease;
}
.nx-ai-chat-bubble {
    display: flex; align-items: center; gap: 8px;
    background: rgba(30,107,255,0.06); border-radius: 12px; padding: 10px 14px; font-size: .85rem;
}

.nx-trust { background: var(--nx-surface); border-top: 1px solid var(--nx-border-soft); border-bottom: 1px solid var(--nx-border-soft); }

.nx-stat-box { padding: 20px; text-align: center; }
.nx-stat-num {
    font-size: 2.5rem; font-weight: 700; font-family: var(--nx-font-display);
    background: linear-gradient(135deg, var(--nx-electric), var(--nx-purple));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nx-stat-text { color: var(--nx-text-muted); font-weight: 500; margin-top: 4px; }

.nx-section-alt { background: var(--nx-surface); border-top: 1px solid var(--nx-border-soft); border-bottom: 1px solid var(--nx-border-soft); }

.nx-feature-card {
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius); padding: 28px 24px; height: 100%; transition: all .2s ease;
}
.nx-feature-card:hover { box-shadow: var(--nx-shadow-lg); transform: translateY(-2px); border-color: rgba(30,107,255,0.2); }
.nx-feature-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 16px;
}
.nx-feature-card h5 { font-weight: 600; margin-bottom: 8px; }
.nx-feature-card p { font-size: .9rem; margin: 0; }

.nx-check-list { list-style: none; padding: 0; }
.nx-check-list li { padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.nx-check-list li i { color: var(--nx-success); }

.nx-showcase-card {
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg); padding: 28px; box-shadow: var(--nx-shadow);
}
.nx-showcase-icon { font-size: 2rem; color: var(--nx-electric); margin-bottom: 12px; }

.nx-call-flow { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.nx-call-step {
    display: flex; align-items: center; gap: 8px; background: var(--nx-surface-2);
    border: 1px solid var(--nx-border-soft); border-radius: 10px; padding: 10px 20px;
    font-weight: 500; width: 100%;
}
.nx-call-step i { font-size: 1.2rem; color: var(--nx-electric); }
.nx-call-arrow { color: var(--nx-text-muted); }
.nx-call-done { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); }
.nx-call-done i { color: var(--nx-success); }

.nx-wa-chat { display: flex; flex-direction: column; gap: 10px; }
.nx-wa-msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: .9rem; }
.nx-wa-msg small { display: block; font-size: .7rem; opacity: .6; margin-bottom: 2px; }
.nx-wa-in { background: var(--nx-surface-2); align-self: flex-start; border: 1px solid var(--nx-border-soft); }
.nx-wa-out { background: #DCF8C6; align-self: flex-end; }

.nx-kanban-mini { display: flex; gap: 8px; overflow-x: auto; }
.nx-kanban-col { flex: 1; min-width: 100px; }
.nx-kanban-head { font-size: .75rem; font-weight: 600; text-align: center; padding: 6px; background: var(--nx-surface-2); border-radius: 8px; margin-bottom: 6px; }
.nx-kanban-won { background: rgba(16,185,129,0.1); color: var(--nx-success); }
.nx-kanban-card { background: var(--nx-surface); border: 1px solid var(--nx-border-soft); border-radius: 8px; padding: 8px 10px; font-size: .8rem; margin-bottom: 6px; }
.nx-kanban-card-won { border-color: rgba(16,185,129,0.2); background: rgba(16,185,129,0.04); }

.nx-leader-mini { display: flex; flex-direction: column; gap: 8px; }
.nx-leader-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--nx-surface-2); border-radius: 10px; border: 1px solid var(--nx-border-soft); }
.nx-rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; }
.nx-leader-score { margin-left: auto; font-weight: 700; color: var(--nx-electric); }

.nx-step-card { text-align: center; padding: 28px 20px; }
.nx-step-num {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--nx-electric), var(--nx-purple));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; margin: 0 auto 16px;
}

.nx-integration-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius); padding: 24px 12px; transition: all .2s ease;
}
.nx-integration-card:hover { box-shadow: var(--nx-shadow); transform: translateY(-2px); }
.nx-integration-card i { font-size: 2rem; }
.nx-integration-card span { font-size: .85rem; font-weight: 600; }

.nx-price-card, .nx-price-card-detail {
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg); padding: 32px 28px; text-align: center;
    transition: all .2s ease; position: relative;
}
.nx-price-card:hover, .nx-price-card-detail:hover { box-shadow: var(--nx-shadow-lg); }
.nx-price-popular { border-color: var(--nx-electric); border-width: 2px; box-shadow: var(--nx-shadow-glow); }
.nx-popular-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--nx-electric), var(--nx-purple));
    color: #fff; font-size: .75rem; font-weight: 600; padding: 4px 16px; border-radius: 99px;
}
.nx-price, .nx-price-detail { font-size: 2.5rem; font-weight: 700; font-family: var(--nx-font-display); color: var(--nx-navy-700); margin: 12px 0; }
.nx-price-period { font-size: 1rem; font-weight: 400; color: var(--nx-text-muted); }
.nx-price-card-detail { text-align: left; }
.nx-feature-list { list-style: none; padding: 0; }
.nx-feature-list li { padding: 6px 0; font-size: .9rem; display: flex; align-items: flex-start; gap: 8px; }
.nx-feature-list li i { color: var(--nx-success); margin-top: 2px; flex-shrink: 0; }

.nx-include-box {
    display: flex; align-items: center; gap: 8px; background: var(--nx-surface-2);
    border: 1px solid var(--nx-border-soft); border-radius: 10px; padding: 12px 16px;
    font-weight: 500; font-size: .9rem;
}

.nx-testimonial {
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius); padding: 28px 24px; height: 100%;
}
.nx-stars { color: #FBBF24; margin-bottom: 12px; }
.nx-testimonial p { font-style: italic; margin-bottom: 16px; }
.nx-testimonial-author { font-size: .9rem; }

.nx-faq .accordion-item { border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-sm) !important; margin-bottom: 10px; overflow: hidden; }
.nx-faq .accordion-button { font-weight: 600; padding: 16px 20px; }
.nx-faq .accordion-button:not(.collapsed) { background: rgba(30,107,255,0.04); color: var(--nx-navy-700); box-shadow: none; }
.nx-faq .accordion-button:focus { box-shadow: none; border-color: var(--nx-border); }
.nx-faq .accordion-body { padding: 0 20px 16px; color: var(--nx-text-muted); }

.nx-cta-banner {
    background: linear-gradient(135deg, var(--nx-navy-800), var(--nx-navy-600));
    border-radius: var(--nx-radius-lg); padding: 50px 30px;
    box-shadow: var(--nx-shadow-lg); position: relative; overflow: hidden;
}
.nx-cta-banner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(400px 200px at 20% 20%, rgba(34,211,238,0.15), transparent 60%);
}

.nx-blog-card {
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius); overflow: hidden; transition: all .2s ease;
}
.nx-blog-card:hover { box-shadow: var(--nx-shadow-lg); transform: translateY(-2px); }
.nx-blog-img { height: 160px; display: flex; align-items: center; justify-content: center; }
.nx-blog-body { padding: 20px; }
.nx-blog-tag { display: inline-block; background: rgba(30,107,255,0.08); color: var(--nx-electric); font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; margin-bottom: 8px; }

.nx-team-card { text-align: center; padding: 28px 20px; background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius); }
.nx-team-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 12px; }

.nx-footer { background: var(--nx-navy-900); color: #fff; padding-top: 20px; }
.nx-footer h6 { color: #fff; }
.nx-footer p { color: #fff; }
.nx-footer a { color: #fff; text-decoration: none; transition: color .15s ease; }
.nx-footer a:hover { color: var(--nx-cyan); }
.nx-footer .text-muted { color: #fff !important; }
.nx-footer-links li { margin-bottom: 8px; }
.nx-footer-divider { border-color: rgba(255,255,255,0.08); }
.nx-social {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--nx-text-dim); transition: all .15s ease;
}
.nx-social:hover { background: var(--nx-electric); color: #fff; }

.nx-ai-orb {
    background: linear-gradient(135deg, var(--nx-electric), var(--nx-purple));
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 0 18px rgba(34,211,238,0.4);
    animation: nx-pulse 3s ease-in-out infinite;
}
.nx-ai-orb-sm { width: 32px; height: 32px; font-size: 1rem; }

/* ==========================================================================
   Mega Menu (public navbar)
   ========================================================================== */
.nx-megamenu { position: relative; }
.nx-megamenu-panel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg); padding: 14px; width: 560px; z-index: 1050;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
    transition: all .18s ease;
}
.nx-megamenu:hover .nx-megamenu-panel,
.nx-megamenu:focus-within .nx-megamenu-panel {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nx-megamenu-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--nx-radius-sm);
    text-decoration: none; color: var(--nx-navy-700); transition: background .15s ease;
}
.nx-megamenu-item:hover { background: var(--nx-surface-2); }
.nx-megamenu-item i { font-size: 1.1rem; color: var(--nx-electric); margin-top: 2px; }
.nx-megamenu-item strong { display: block; font-size: .875rem; }
.nx-megamenu-item small { color: var(--nx-text-muted); font-size: .78rem; }

/* ==========================================================================
   Pricing hook badge (hero)
   ========================================================================== */
.nx-offer-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(34,211,238,0.1);
    border: 1px solid rgba(34,211,238,0.35); color: var(--nx-cyan); font-weight: 600; font-size: .82rem;
    padding: 6px 14px; border-radius: 99px; text-decoration: none; margin-bottom: 14px;
}
.nx-offer-badge:hover { background: rgba(34,211,238,0.18); color: var(--nx-cyan); }

/* ==========================================================================
   Industries marquee / logo marquee
   ========================================================================== */
.nx-marquee { overflow: hidden; position: relative; }
.nx-marquee::before, .nx-marquee::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.nx-marquee::before { left: 0; background: linear-gradient(90deg, var(--nx-app-bg), transparent); }
.nx-marquee::after { right: 0; background: linear-gradient(270deg, var(--nx-app-bg), transparent); }
.nx-marquee-track { display: flex; gap: 14px; width: max-content; animation: nx-marquee-scroll 32s linear infinite; }
.nx-marquee:hover .nx-marquee-track { animation-play-state: paused; }
@keyframes nx-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nx-marquee-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99px;
    background: var(--nx-surface); border: 1px solid var(--nx-border); font-size: .85rem; font-weight: 500;
    color: var(--nx-navy-600); white-space: nowrap;
}

/* ==========================================================================
   "The Leak" problem-narrative section
   ========================================================================== */
.nx-leak-section { background: var(--nx-navy-900); color: #fff; }
.nx-leak-section .text-muted { color: var(--nx-text-dim) !important; }
.nx-leak-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--nx-radius);
    padding: 16px 18px; margin-bottom: 12px;
}
.nx-leak-card .nx-leak-time { font-size: .72rem; color: var(--nx-text-dim); text-transform: uppercase; letter-spacing: .06em; }
.nx-leak-card .nx-leak-title { font-weight: 600; margin: 4px 0 2px; }
.nx-leak-card .nx-leak-status { font-size: .78rem; font-weight: 600; }
.nx-leak-status-missed { color: #f87171; }
.nx-leak-status-unread { color: #fbbf24; }
.nx-leak-status-cold { color: #94a3b8; }

/* ==========================================================================
   Comparison table (Neroxa vs old way)
   ========================================================================== */
.nx-compare-table { border-radius: var(--nx-radius); overflow: hidden; border: 1px solid var(--nx-border); background: var(--nx-surface); }
.nx-compare-table .nx-compare-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; border-bottom: 1px solid var(--nx-border-soft); }
.nx-compare-table .nx-compare-row:last-child { border-bottom: none; }
.nx-compare-table .nx-compare-row > div { padding: 14px 18px; font-size: .88rem; }
.nx-compare-table .nx-compare-head { font-weight: 700; background: var(--nx-surface-2); }
.nx-compare-table .nx-compare-label { font-weight: 600; color: var(--nx-navy-700); background: var(--nx-surface-2); }
.nx-compare-table .nx-compare-good { color: var(--nx-success); font-weight: 500; }
.nx-compare-table .nx-compare-bad { color: var(--nx-text-muted); }
@media (max-width: 768px) {
    .nx-compare-table .nx-compare-row { grid-template-columns: 1fr; }
    .nx-compare-table .nx-compare-row > div { border-bottom: 1px solid var(--nx-border-soft); }
}

/* ==========================================================================
   Solution landing pages
   ========================================================================== */
.nx-solution-hero { padding: 60px 0 30px; }
.nx-mini-faq .accordion-item { border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-sm) !important; margin-bottom: 10px; }

@media (max-width: 768px) {
    .nx-hero { padding: 30px 0; }
    .nx-stat-num { font-size: 1.8rem; }
    .nx-price, .nx-price-detail { font-size: 2rem; }
    .nx-cta-banner { padding: 30px 20px; }
    .nx-megamenu-panel { position: fixed; left: 0; right: 0; width: 100%; top: auto; transform: none; grid-template-columns: 1fr; }
}