:root{

    --bg1:#081f4d;
    --bg2:#0d347f;

    --card-bg:rgba(255,255,255,0.06);
    --card-border:rgba(255,255,255,0.08);

    --text-main:#ffffff;
    --text-soft:rgba(255,255,255,0.72);

}

body{

    background:
    radial-gradient(circle at top right,#1d4ed8 0%,transparent 30%),
    linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);

    color:var(--text-main);

}
/* ===================================================== */
/* HERO INTRO */
/* ===================================================== */

.hero-intro{

    padding:2.5rem;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.04)
    );

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

    backdrop-filter:blur(10px);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.20);

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.45rem .9rem;

    border-radius:999px;

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

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

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.08em;

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

}

.hero-title{

    font-size:3rem;

    font-weight:800;

    line-height:1.1;

    color:#fff;

    max-width:900px;

}

.hero-text{

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

    max-width:950px;

    font-size:1.1rem;

    line-height:1.8;

}

.hero-mini-card{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.2rem;

    border-radius:22px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.07),
        rgba(255,255,255,0.03)
    );

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

    height:100%;

}

.hero-mini-icon{

    width:52px;
    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:1.3rem;

    color:#fff;

}

.hero-mini-title{

    color:#fff;

    font-weight:700;

    margin-bottom:.2rem;

}

.hero-mini-text{

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

    font-size:.88rem;

}
/* ===================================================== */
/* CARD */
/* ===================================================== */

.infl-card{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.04)
    );

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

    border-radius:30px;

    overflow:hidden;

    backdrop-filter:blur(10px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.20);

    transition:all .25s ease;

}

.infl-card:hover{

    transform:translateY(-3px);

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

}

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

.infl-card-header{

    padding:2rem;

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

}

.infl-source{

    color:var(--text-soft);

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.72rem;

    font-weight:700;

    margin-bottom:.4rem;

}

.infl-title{

    font-size:2rem;

    font-weight:800;

    color:#fff;

    margin:0;

}

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

.infl-btn{

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

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

    color:#fff;

    border-radius:999px;

    padding:.55rem 1rem;

    font-size:.85rem;

    font-weight:600;

    transition:all .2s ease;

}

.infl-btn:hover{

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

    color:#fff;

}

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

.kpi-box{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

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

    border-radius:24px;

    padding:1.5rem;

    height:100%;

}

.kpi-label{

    color:var(--text-soft);

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.74rem;

    margin-bottom:.7rem;

}

.kpi-value{

    font-size:2.8rem;

    font-weight:800;

    line-height:1;

    color:#fff;

    letter-spacing:-0.03em;

}

/* ===================================================== */
/* META */
/* ===================================================== */

.infl-meta{

    color:var(--text-soft);

    font-size:.92rem;

}

/* ===================================================== */
/* TABLE */
/* ===================================================== */

.infl-table{

    color:#fff;

    margin-bottom:0;

}

.infl-table thead{

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

}

.infl-table thead th{

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

    border:none;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    padding:1rem .75rem;

}

.infl-table tbody tr{

    transition:background .15s ease;

}

.infl-table tbody tr:hover{

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

}

.infl-table td{

    border-color:rgba(255,255,255,0.05);

    padding:.85rem .75rem;

    color:#fff;

    background:transparent !important;

}

.infl-table td.text-muted{

    color:rgba(255,255,255,0.60) !important;

}

/* ===================================================== */
/* SECTION BIG CARD */
/* ===================================================== */

.section-card{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

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

    border-radius:32px;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.18);

}

.section-title{

    color:#fff;

    font-weight:800;

}

.section-sub{

    color:var(--text-soft);

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.75rem;

}
/* ===================================================== */
/* APEXCHARTS DARK THEME */
/* ===================================================== */

.apexcharts-canvas text{

    fill:rgba(255,255,255,0.72) !important;

}

.apexcharts-xaxis-label{

    fill:rgba(255,255,255,0.68) !important;

    font-size:11px !important;

}

.apexcharts-yaxis-label{

    fill:rgba(255,255,255,0.70) !important;

    font-size:11px !important;

}

.apexcharts-legend-text{

    color:#fff !important;

}

.apexcharts-title-text{

    fill:#fff !important;

}

.apexcharts-gridline{

    stroke:rgba(255,255,255,0.08) !important;

}

.apexcharts-tooltip{

    background:#102d68 !important;

    color:#fff !important;

    border:none !important;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.35) !important;

}

/* ===================================================== */
/* TABLE FIX */
/* ===================================================== */

.infl-table{

    --bs-table-bg:transparent !important;
    --bs-table-striped-bg:transparent !important;
    --bs-table-hover-bg:rgba(255,255,255,0.03) !important;

    color:#fff !important;

}

.infl-table thead{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.04)
    ) !important;

}

.infl-table thead th{

    color:rgba(255,255,255,0.82) !important;

    background:transparent !important;

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

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.infl-table tbody td{

    background:transparent !important;

    color:rgba(255,255,255,0.92) !important;

    border-color:rgba(255,255,255,0.05) !important;

    font-size:.88rem;

}

.infl-table tbody tr:hover td{

    background:rgba(255,255,255,0.04) !important;

}

/* ===================================================== */
/* KPI REFINEMENT */
/* ===================================================== */

.kpi-value{

    font-size:2.3rem;

    font-weight:800;

    color:#fff;

}

.kpi-box{

    padding:1.25rem;

}

/* ===================================================== */
/* BIG SECTION CARD */
/* ===================================================== */

.section-card{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

    backdrop-filter:blur(10px);

    overflow:hidden;

}

/* ===================================================== */
/* DOWNLOAD BAR */
/* ===================================================== */

.download-bar{

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

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

    border-radius:22px;

    padding:1rem 1.2rem;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    margin-bottom:1.5rem;

}

.download-left{

    display:flex;

    align-items:center;

    gap:1rem;

}

.download-icon{

    width:52px;
    height:52px;

    border-radius:16px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.05)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    color:#fff;

}

.download-title{

    color:#fff;

    font-weight:700;

    font-size:.98rem;

    margin-bottom:.15rem;

}

.download-sub{

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

    font-size:.82rem;

}

.download-btn{

    background:#fff;

    color:#0d347f;

    border:none;

    border-radius:999px;

    padding:.7rem 1.2rem;

    font-weight:700;

    text-decoration:none;

    transition:all .2s ease;

    white-space:nowrap;

}

.download-btn:hover{

    transform:translateY(-2px);

    background:#dbeafe;

    color:#0d347f;

}