@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Tilt+Neon&display=swap");


/* =========================================================
   IBEX PROSPECT
   GLOBAL VISUAL SYSTEM
   ========================================================= */

:root {
    /*
     * Brand
     */
    --ibex-background:
        #0d1117;

    --ibex-background-soft:
        #111820;

    --ibex-background-elevated:
        #151d27;

    --ibex-title:
        #c6516b;

    --ibex-text:
        #f8fafc;

    --ibex-text-soft:
        #cbd5e1;

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

    --ibex-button:
        #2563eb;

    --ibex-button-hover:
        #1d4ed8;

    --ibex-button-light:
        #3b82f6;


    /*
     * Borders
     */
    --ibex-border:
        rgba(248, 250, 252, 0.08);

    --ibex-border-strong:
        rgba(248, 250, 252, 0.14);


    /*
     * Cards
     */
    --ibex-card-start:
        #121a23;

    --ibex-card-end:
        #0b1118;

    --ibex-card-shadow-dark:
        #080b0f;

    --ibex-card-shadow-light:
        #151b23;


    /*
     * Status
     */
    --ibex-success:
        #22c55e;

    --ibex-warning:
        #f59e0b;

    --ibex-danger:
        #ef4444;


    /*
     * Fonts
     */
    --ibex-font-title:
        "Tilt Neon",
        sans-serif;

    --ibex-font-body:
        "Poppins",
        sans-serif;


    /*
     * Compatibility with
     * existing Prospect styles
     */
    --bg:
        var(--ibex-background);

    --background:
        var(--ibex-background);

    --surface:
        var(--ibex-card-start);

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

    --surface-elevated:
        var(--ibex-background-elevated);

    --text:
        var(--ibex-text);

    --text-soft:
        var(--ibex-text-soft);

    --text-muted:
        var(--ibex-text-muted);

    --border:
        var(--ibex-border);

    --border-strong:
        var(--ibex-border-strong);

    --accent:
        var(--ibex-title);

    --accent-soft:
        rgba(198, 81, 107, 0.12);

    --success:
        var(--ibex-success);

    --warning:
        var(--ibex-warning);

    --danger:
        var(--ibex-danger);
}


/* =========================================================
   RESET / GENERAL
   ========================================================= */

* {
    box-sizing:
        border-box;
}


html {
    background:
        var(--ibex-background);
}


body {
    margin:
        0;

    background:
        var(--ibex-background) !important;

    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


button,
input,
select,
textarea {
    font-family:
        var(--ibex-font-body);
}


p,
span,
label,
input,
select,
textarea,
td,
th,
li,
small {
    font-family:
        var(--ibex-font-body);
}


/* =========================================================
   TITLES
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400;

    letter-spacing:
        0.01em;
}


.page-title,
.section-title,
.card-title,
.panel-title,
.detail-title,
.modal-title {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;
}


.eyebrow,
.detail-section-title {
    color:
        var(--ibex-title) !important;
}


/* =========================================================
   TEXT
   ========================================================= */

body,
main,
.content,
.page-content {
    color:
        var(--ibex-text);
}


p,
.description,
.subtitle,
.detail-text {
    color:
        var(--ibex-text-soft);
}


strong {
    color:
        var(--ibex-text);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    background:
        #0a0e13 !important;

    border-right:
        1px solid
        var(--ibex-border) !important;
}


.brand strong {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;

    letter-spacing:
        0.02em;
}


.brand span,
.sidebar-footer span,
.sidebar-footer small {
    font-family:
        var(--ibex-font-body) !important;
}


.nav-item {
    color:
        var(--ibex-text-muted) !important;

    font-family:
        var(--ibex-font-body) !important;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease !important;
}


.nav-item:hover {
    color:
        var(--ibex-text) !important;

    background:
        rgba(37, 99, 235, 0.10) !important;

    transform:
        translateX(2px);
}


.nav-item--active,
.nav-item.active {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.95),
            rgba(29, 78, 216, 0.82)
        ) !important;

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


/* =========================================================
   CARDS
   Adapted from supplied neumorphic reference
   ========================================================= */

.card,
.summary-card,
.metric-card,
.stat-card,
.company-card,
.empresa-card,
.campaign-card,
.campanha-card,
.opportunity-card,
.oportunidade-card,
.pipeline-card,
.review-card,
.revisao-card,
.quality-card,
.qualidade-card,
.section-card,
.info-card,
.next-action-card {
    border:
        1px solid
        rgba(248, 250, 252, 0.055) !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            145deg,
            var(--ibex-card-start),
            var(--ibex-card-end)
        ) !important;

    box-shadow:
        9px 9px 18px
        var(--ibex-card-shadow-dark),
        -9px -9px 18px
        var(--ibex-card-shadow-light) !important;
}


/*
 * Larger structural panels use a softer
 * version of the same visual language.
 */

.panel,
.detail-panel,
.filters,
.filter-bar,
.toolbar {
    border:
        1px solid
        var(--ibex-border) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #111820,
            #0c1219
        ) !important;

    box-shadow:
        6px 6px 16px
        rgba(0, 0, 0, 0.25) !important;
}


/*
 * Pipeline columns should remain visually
 * lighter than the opportunity cards inside.
 */

.pipeline-column {
    border:
        1px solid
        var(--ibex-border) !important;

    border-radius:
        24px !important;

    background:
        rgba(17, 24, 32, 0.65) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025) !important;
}


/* =========================================================
   CARD INTERACTION
   ========================================================= */

.company-card,
.empresa-card,
.campaign-card,
.campanha-card,
.opportunity-card,
.oportunidade-card,
.pipeline-card {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease !important;
}


.company-card:hover,
.empresa-card:hover,
.campaign-card:hover,
.campanha-card:hover,
.opportunity-card:hover,
.oportunidade-card:hover,
.pipeline-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(198, 81, 107, 0.25) !important;

    box-shadow:
        12px 12px 24px
        #070a0e,
        -8px -8px 20px
        #161d25 !important;
}


/* =========================================================
   BUTTONS
   Adapted from supplied reference
   ========================================================= */

button,
.btn,
.button,
.primary-button,
.action-button,
.stage-button,
.modal-button {
    outline:
        none;

    border:
        1px solid
        rgba(255, 255, 255, 0.07) !important;

    border-radius:
        10px !important;

    cursor:
        pointer;

    background:
        var(--ibex-button) !important;

    color:
        #ffffff !important;

    font-family:
        var(--ibex-font-body) !important;

    font-weight:
        700 !important;

    transition:
        transform 180ms ease,
        background 300ms ease,
        box-shadow 300ms ease,
        filter 300ms ease !important;

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


button:hover:not(:disabled),
.btn:hover:not(:disabled),
.button:hover:not(:disabled),
.primary-button:hover:not(:disabled),
.action-button:hover:not(:disabled),
.stage-button:hover:not(:disabled),
.modal-button:hover:not(:disabled) {
    background:
        linear-gradient(
            270deg,
            #1d4ed8 0%,
            #3b82f6 58%,
            #2563eb 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 34px
        rgba(37, 99, 235, 0.35) !important;

    transform:
        translateY(-1px);
}


button:active:not(:disabled),
.btn:active:not(:disabled),
.button:active:not(:disabled),
.primary-button:active:not(:disabled),
.action-button:active:not(:disabled),
.stage-button:active:not(:disabled),
.modal-button:active:not(:disabled) {
    transform:
        scale(0.96);
}


button:disabled,
.btn:disabled,
.button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.45;

    box-shadow:
        none !important;
}


/*
 * Danger buttons remain semantically red.
 */

button.danger,
.btn-danger,
.danger-button,
.button--danger {
    background:
        var(--ibex-danger) !important;

    box-shadow:
        0 8px 24px
        rgba(239, 68, 68, 0.18) !important;
}


button.danger:hover,
.btn-danger:hover,
.danger-button:hover,
.button--danger:hover {
    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        ) !important;
}


/*
 * Secondary / ghost buttons
 */

.secondary-button,
.btn-secondary,
.button--secondary,
.stage-button:not(.stage-button--primary) {
    background:
        rgba(37, 99, 235, 0.10) !important;

    border-color:
        rgba(37, 99, 235, 0.28) !important;

    color:
        #93c5fd !important;

    box-shadow:
        none !important;
}


.secondary-button:hover,
.btn-secondary:hover,
.button--secondary:hover,
.stage-button:not(.stage-button--primary):hover {
    background:
        rgba(37, 99, 235, 0.22) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

input,
select,
textarea {
    border:
        1px solid
        var(--ibex-border-strong) !important;

    border-radius:
        10px !important;

    background:
        #0a0f15 !important;

    color:
        var(--ibex-text) !important;
}


input::placeholder,
textarea::placeholder {
    color:
        #64748b !important;
}


input:focus,
select:focus,
textarea:focus {
    outline:
        none !important;

    border-color:
        var(--ibex-button) !important;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.12) !important;
}


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

table {
    color:
        var(--ibex-text);
}


th {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}


td {
    color:
        var(--ibex-text-soft);
}


tr {
    border-color:
        var(--ibex-border) !important;
}


/* =========================================================
   SCORE / METRICS
   ========================================================= */

.summary-card strong,
.metric-card strong,
.stat-card strong,
.detail-score strong,
.pipeline-card-score {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;

    font-weight:
        700 !important;
}


/* =========================================================
   NEXT BEST ACTION
   ========================================================= */

.next-action-card {
    border-color:
        rgba(198, 81, 107, 0.20) !important;

    background:
        linear-gradient(
            145deg,
            rgba(198, 81, 107, 0.08),
            rgba(18, 26, 35, 0.96)
        ) !important;
}


.next-action-label {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-size:
        11px !important;
}


.next-action-card h3 {
    color:
        var(--ibex-title) !important;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal,
.modal-content,
.dialog,
.dialog-content {
    color:
        var(--ibex-text) !important;

    border:
        1px solid
        var(--ibex-border) !important;

    background:
        linear-gradient(
            145deg,
            #121a23,
            #0b1118
        ) !important;

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.55) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

* {
    scrollbar-color:
        rgba(198, 81, 107, 0.40)
        transparent;

    scrollbar-width:
        thin;
}


::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}


::-webkit-scrollbar-track {
    background:
        transparent;
}


::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        rgba(198, 81, 107, 0.34);
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background:
        rgba(198, 81, 107, 0.35);

    color:
        #ffffff;
}


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

@media (max-width: 700px) {
    .card,
    .summary-card,
    .metric-card,
    .stat-card,
    .company-card,
    .empresa-card,
    .campaign-card,
    .campanha-card,
    .opportunity-card,
    .oportunidade-card,
    .pipeline-card,
    .next-action-card {
        border-radius:
            18px !important;

        box-shadow:
            5px 5px 12px #080b0f,
            -4px -4px 10px #151b23 !important;
    }
}


/* =========================================================
   IBEX PROSPECT — COMPONENT HARMONIZATION V2
   Pipeline + Revisões
   ========================================================= */


/* ---------------------------------------------------------
   PIPELINE — METRICS
   --------------------------------------------------------- */

.pipeline-metric {
    border:
        1px solid
        rgba(248, 250, 252, 0.08) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #121923,
            #0a0f15
        ) !important;

    box-shadow:
        7px 7px 16px
        rgba(5, 8, 12, 0.72),
        -4px -4px 13px
        rgba(24, 32, 42, 0.48) !important;
}


.pipeline-metric span {
    color:
        var(--ibex-text-muted) !important;
}


.pipeline-metric strong {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;
}


/* ---------------------------------------------------------
   PIPELINE — BOARD COLUMNS
   Structural containers should remain subtle
   --------------------------------------------------------- */

.pipeline-column {
    border:
        1px solid
        var(--ibex-border) !important;

    border-radius:
        18px !important;

    background:
        rgba(14, 20, 28, 0.78) !important;

    box-shadow:
        none !important;
}


.pipeline-column-header {
    border-bottom:
        1px solid
        var(--ibex-border) !important;

    background:
        rgba(255, 255, 255, 0.008) !important;
}


.pipeline-column-title {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}


.pipeline-column-count {
    background:
        rgba(248, 250, 252, 0.045) !important;

    color:
        var(--ibex-text-soft) !important;
}


/* ---------------------------------------------------------
   PIPELINE — OPPORTUNITY CARDS
   Neumorphism only on the actual actionable cards
   --------------------------------------------------------- */

.pipeline-card {
    border:
        1px solid
        rgba(248, 250, 252, 0.07) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            #121923,
            #0a0f15
        ) !important;

    color:
        var(--ibex-text) !important;

    box-shadow:
        5px 5px 12px
        rgba(5, 8, 12, 0.62),
        -3px -3px 10px
        rgba(23, 31, 41, 0.42) !important;
}


.pipeline-card:hover {
    border-color:
        rgba(198, 81, 107, 0.32) !important;

    background:
        linear-gradient(
            145deg,
            #151c26,
            #0c1118
        ) !important;

    box-shadow:
        7px 7px 16px
        rgba(5, 8, 12, 0.70),
        -4px -4px 12px
        rgba(24, 32, 42, 0.46) !important;
}


.pipeline-card--selected {
    border-color:
        rgba(198, 81, 107, 0.72) !important;

    background:
        linear-gradient(
            145deg,
            rgba(198, 81, 107, 0.13),
            #0b1118
        ) !important;

    box-shadow:
        0 0 0 1px
        rgba(198, 81, 107, 0.08),
        6px 6px 14px
        rgba(5, 8, 12, 0.70) !important;
}


.pipeline-card-company {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;
}


.pipeline-card-service {
    color:
        var(--ibex-text-soft) !important;
}


.pipeline-card-location {
    color:
        var(--ibex-text-muted) !important;
}


/* ---------------------------------------------------------
   PIPELINE — DETAIL PANEL
   --------------------------------------------------------- */

.pipeline-detail {
    border:
        1px solid
        var(--ibex-border) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #111820,
            #0b1017
        ) !important;

    box-shadow:
        7px 7px 18px
        rgba(5, 8, 12, 0.58),
        -3px -3px 12px
        rgba(22, 29, 38, 0.34) !important;
}


.pipeline-detail h2,
.detail-empty h2,
.detail-content h2 {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}


.detail-service {
    color:
        var(--ibex-text-soft) !important;
}


.detail-location {
    color:
        var(--ibex-text-muted) !important;
}


.detail-score {
    border:
        1px solid
        var(--ibex-border) !important;

    background:
        rgba(248, 250, 252, 0.025) !important;

    box-shadow:
        none !important;
}


.detail-score strong {
    color:
        var(--ibex-text) !important;
}


.detail-section {
    border-color:
        var(--ibex-border) !important;
}


.detail-section-title {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}


/* ---------------------------------------------------------
   PIPELINE — FILTERS
   --------------------------------------------------------- */

.pipeline-filters input,
.pipeline-filters select,
.pipeline-stage-select {
    border:
        1px solid
        var(--ibex-border-strong) !important;

    background:
        #090e14 !important;

    color:
        var(--ibex-text) !important;
}


.pipeline-filters label > span {
    color:
        var(--ibex-text-muted) !important;
}


/* ---------------------------------------------------------
   PIPELINE — BUTTONS
   --------------------------------------------------------- */

.pipeline-refresh,
.stage-button--primary {
    border-color:
        rgba(37, 99, 235, 0.48) !important;

    background:
        var(--ibex-button) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 7px 22px
        rgba(37, 99, 235, 0.22) !important;
}


.pipeline-refresh:hover,
.stage-button--primary:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb,
            #1d4ed8
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 28px
        rgba(37, 99, 235, 0.30) !important;
}


.stage-button:not(.stage-button--primary) {
    border-color:
        rgba(37, 99, 235, 0.24) !important;

    background:
        rgba(37, 99, 235, 0.09) !important;

    color:
        #bfdbfe !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   REVIEWS — SUMMARY
   --------------------------------------------------------- */

.review-metric {
    border:
        1px solid
        var(--ibex-border) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #121923,
            #0a0f15
        ) !important;

    box-shadow:
        6px 6px 15px
        rgba(5, 8, 12, 0.64),
        -3px -3px 11px
        rgba(23, 31, 41, 0.38) !important;
}


.review-metric--accent {
    border-color:
        rgba(198, 81, 107, 0.23) !important;

    background:
        linear-gradient(
            145deg,
            rgba(198, 81, 107, 0.09),
            #0a0f15
        ) !important;
}


.review-metric span {
    color:
        var(--ibex-text-muted) !important;
}


.review-metric strong,
.review-metric--accent strong {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;
}


/* ---------------------------------------------------------
   REVIEWS — TOOLBAR
   --------------------------------------------------------- */

.review-toolbar input,
.review-toolbar select {
    border:
        1px solid
        var(--ibex-border-strong) !important;

    background:
        #090e14 !important;

    color:
        var(--ibex-text) !important;
}


/* ---------------------------------------------------------
   REVIEWS — LIST
   --------------------------------------------------------- */

.review-list-header {
    border-color:
        var(--ibex-border) !important;

    background:
        rgba(248, 250, 252, 0.012) !important;
}


.review-list-header span {
    color:
        var(--ibex-text-muted) !important;
}


.review-list-header strong {
    color:
        var(--ibex-title) !important;
}


.review-card {
    border-color:
        var(--ibex-border) !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.review-card:hover {
    background:
        rgba(37, 99, 235, 0.045) !important;
}


.review-card.selected {
    background:
        rgba(198, 81, 107, 0.07) !important;

    border-color:
        rgba(198, 81, 107, 0.22) !important;
}


.review-company strong {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;
}


.review-company span,
.review-reason-preview {
    color:
        var(--ibex-text-muted) !important;
}


.review-score {
    color:
        var(--ibex-text) !important;

    background:
        rgba(198, 81, 107, 0.12) !important;
}


/* ---------------------------------------------------------
   REVIEWS — DETAIL
   --------------------------------------------------------- */

.review-detail {
    border:
        1px solid
        var(--ibex-border) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #111820,
            #0b1017
        ) !important;

    box-shadow:
        6px 6px 16px
        rgba(5, 8, 12, 0.55) !important;
}


.review-detail h2,
.review-detail h3 {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}


.review-score-box {
    border-color:
        var(--ibex-border) !important;

    background:
        rgba(248, 250, 252, 0.025) !important;
}


.review-score-box strong {
    color:
        var(--ibex-text) !important;
}


/* ---------------------------------------------------------
   REVIEWS — ACTIONS
   --------------------------------------------------------- */

.review-action--primary {
    border-color:
        rgba(37, 99, 235, 0.48) !important;

    background:
        var(--ibex-button) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 7px 22px
        rgba(37, 99, 235, 0.20) !important;
}


.review-action--primary:hover {
    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb,
            #1d4ed8
        ) !important;
}


.review-action--secondary {
    border-color:
        rgba(37, 99, 235, 0.22) !important;

    background:
        rgba(37, 99, 235, 0.08) !important;

    color:
        #bfdbfe !important;

    box-shadow:
        none !important;
}


.review-action--danger {
    border-color:
        rgba(239, 68, 68, 0.26) !important;

    background:
        rgba(239, 68, 68, 0.10) !important;

    color:
        #fca5a5 !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   SEMANTIC TITLES
   Avoid painting every heading pink.
   --------------------------------------------------------- */

.pipeline-card h3,
.review-card h3,
.company-card h3,
.empresa-card h3,
.opportunity-card h3,
.oportunidade-card h3 {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;

    font-weight:
        700 !important;
}


/* ---------------------------------------------------------
   PRIMARY PAGE TITLES
   --------------------------------------------------------- */

.page-header h1,
.pipeline-header h1,
.review-header h1,
main > header h1,
.content > header h1 {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}


/* ---------------------------------------------------------
   GLOBAL ACTIVE NAV
   --------------------------------------------------------- */

.nav-item--active,
.nav-item.active,
.nav-item[aria-current="page"] {
    color:
        #ffffff !important;

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

    box-shadow:
        0 7px 22px
        rgba(37, 99, 235, 0.18) !important;
}


/* ---------------------------------------------------------
   MOBILE SHADOW REDUCTION
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .pipeline-metric,
    .pipeline-card,
    .pipeline-detail,
    .review-metric,
    .review-detail {
        box-shadow:
            4px 4px 10px
            rgba(5, 8, 12, 0.52) !important;
    }
}


/* =========================================================
   IBEX TYPOGRAPHY REFINEMENT
   ========================================================= */

/*
 * Heading is a structural HTML element.
 * It does not necessarily mean "brand title".
 */

h3,
h4,
h5,
h6 {
    color:
        var(--ibex-text) !important;

    font-family:
        var(--ibex-font-body) !important;

    font-weight:
        600;
}


/*
 * Brand/page/section headings intentionally use Tilt Neon.
 */

h1,
.page-title,
.section-title,
.panel-title,
.modal-title,
.detail-section-title,
.eyebrow {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;
}


/*
 * Detail titles are intentionally branded.
 */

.detail-empty h2,
.detail-content > h2,
.review-detail > h2 {
    color:
        var(--ibex-title) !important;

    font-family:
        var(--ibex-font-title) !important;

    font-weight:
        400 !important;
}