/*==================================================
GROW & MONETIZE
==================================================*/

.grow-monetize{

    position:relative;

    overflow:hidden;

    background:#101828;

    padding-block:var(--space-14);

    padding:40px;

}

.grow-monetize::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(59,130,246,.08),
    transparent 42%);

    pointer-events:none;

}

.grow-monetize .container{

    position:relative;

    z-index:2;

}


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

.grow-monetize .section-header{

    max-width:760px;

    margin-inline:auto;

    margin-bottom:2.5rem;

    text-align:center;

}

.grow-monetize .section-label{

    display:inline-flex;

    align-items:center;

    padding:.65rem 1.1rem;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#60A5FA;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.grow-monetize .section-title{

    margin-top:1.6rem;

    color:#fff;

    max-width:900px;

    margin-inline:auto;

}

.grow-monetize .section-description{

    max-width:700px;

    margin:1.5rem auto 0;

    color:#94A3B8;

}


/*==================================================
SHOWCASE
==================================================*/

.revenue-showcase{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:4rem;

    align-items:center;

}



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

.revenue-dashboard{

    background:#F8FAFC;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

    0 35px 80px rgba(0,0,0,.35);

}

.revenue-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 1.5rem;

    background:#ffffff;

    border-bottom:1px solid #E2E8F0;

}

.window-controls{

    display:flex;

    gap:.45rem;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

}

.red{

    background:#EF4444;

}

.yellow{

    background:#F59E0B;

}

.green{

    background:#22C55E;

}

.dashboard-status{

    font-size:.82rem;

    font-weight:600;

    color:#475569;

}

.grow-monetize .revenue-body{

    padding:1.75rem;

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}



/*==================================================
MAIN REVENUE
==================================================*/

.dashboard-highlight{

    padding-bottom:2rem;

    margin-bottom:2rem;

    border-bottom:1px solid #E2E8F0;

}

.highlight-label{

    display:block;

    color:#64748B;

    font-size:.9rem;

    margin-bottom:.75rem;

}

.dashboard-highlight h3{

    font-size:3.5rem;

    line-height:1;

    color:#0F172A;

    margin-bottom:.65rem;

}

.highlight-growth{

    color:#16A34A;

    font-weight:600;

}



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

.dashboard-grid{

    display:grid;

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

    gap:1rem;

}



/*==================================================
SPECIAL CARD
==================================================*/

.metric-card:first-child{

    background:#0F172A;

    border:none;

}

.metric-card:first-child .metric-value{

    color:#fff;

}

.metric-card:first-child .metric-title{

    color:#CBD5E1;

}



/*==================================================
VIEWABILITY BAR
==================================================*/

.metric-card:first-child::after{

    content:"";

    display:block;

    width:65%;

    height:6px;

    margin-top:1rem;

    border-radius:999px;

    background:#3B82F6;

}



/*==================================================
CHART AREA
==================================================*/

.dashboard-chart{

    position:relative;

    margin-top:2rem;

    height:170px;

    border-radius:20px;

    overflow:hidden;

    background:#F1F5F9;

}

.chart-grid{

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        to top,

        rgba(148,163,184,.18),

        rgba(148,163,184,.18) 1px,

        transparent 1px,

        transparent 34px

    );

}

.chart-line{

    position:absolute;

    left:7%;

    bottom:22%;

    width:86%;

    height:4px;

    border-radius:999px;

    background:#2563EB;

    transform:rotate(-6deg);

}

/*==================================================
REVENUE CONTENT
==================================================*/

.revenue-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

.eyebrow{

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    padding:.45rem .9rem;

    margin-bottom:1.25rem;

    border-radius:999px;

    background:rgba(59,130,246,.10);

    border:1px solid rgba(59,130,246,.20);

    color:#60A5FA;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.revenue-content h3{

    font-size:clamp(2rem,3vw,2.8rem);

    line-height:1.15;

    color:#ffffff;

    margin-bottom:1.25rem;

    max-width:520px;

}

.revenue-content > p{

    max-width:560px;

    color:#94A3B8;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:2.75rem;

}



/*==================================================
PERFORMANCE LIST
==================================================*/

.performance-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.performance-item{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

    padding:1rem 1.2rem;

    border-radius:20px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    transition:.35s ease;

}

.performance-item:hover{

    transform:translateY(-4px);

    border-color:rgba(59,130,246,.35);

    background:rgba(255,255,255,.05);

}

.performance-icon{

    flex-shrink:0;

    width:54px;

    height:54px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2563EB;

    color:#ffffff;

    font-weight:700;

    font-size:1rem;

}

.performance-item h4{

    color:#ffffff;

    font-size:1.1rem;

    margin-bottom:.65rem;

}

.performance-item p{

    color:#94A3B8;

    line-height:1.75;

}



/*==================================================
REVENUE STACK
==================================================*/

.platform-stack{

    margin-top:2.5rem;

    padding:2rem;

    border-radius:28px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

}

.stack-label{

    display:block;

    margin-bottom:1.5rem;

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

}

.stack-items{

    display:flex;

    flex-wrap:wrap;

    gap:.85rem;

}

.stack-items span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.85rem 1.3rem;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#CBD5E1;

    font-size:.9rem;

    transition:.3s ease;

}

.stack-items span:hover{

    transform:translateY(-3px);

    background:#2563EB;

    border-color:#2563EB;

    color:#ffffff;

}



/*==================================================
SECTION SPACING
==================================================*/

.revenue-showcase{

    margin-bottom:4rem;

}



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

@media (max-width:1100px){

    .revenue-showcase{

        grid-template-columns:1fr;

        gap:3.5rem;

    }

    .revenue-content{

        max-width:760px;

        margin-inline:auto;

    }

}

@media (max-width:768px){

    .grow-monetize{

        padding-block:5rem;

    }

    .dashboard-highlight h3{

        font-size:2.7rem;

    }

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .performance-item{

        flex-direction:column;

    }

    .performance-icon{

        width:48px;

        height:48px;

    }

    .platform-stack{

        padding:1.5rem;

    }

    .stack-items{

        gap:.65rem;

    }

    .stack-items span{

        width:100%;

        justify-content:flex-start;

    }

}

@media (max-width:480px){

    .revenue-body{

        padding:1.4rem;

    }

    .revenue-header{

        padding:.85rem 1rem;

    }

    .dashboard-highlight{

        margin-bottom:1.5rem;

        padding-bottom:1.5rem;

    }

    .revenue-content h3{

        font-size:1.9rem;

    }

    .performance-item{

        padding:1.25rem;

    }

}

/*==================================================
MODULE B3
ANIMATIONS & PREMIUM POLISH
==================================================*/


/*=========================================
Dashboard Floating
=========================================*/

.revenue-dashboard{

    transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s ease;

}

.grow-monetize .revenue-dashboard{

    width:100%;

    max-width:520px;

    margin-inline:auto;

}

.revenue-dashboard:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 55px 120px rgba(0,0,0,.45);

}

.grow-monetize .revenue-summary{

    padding-bottom:1rem;

    border-bottom:1px solid #E5E7EB;

}


/*=========================================
Dashboard Shine
=========================================*/

.revenue-dashboard{

    position:relative;

}

.revenue-dashboard::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        115deg,

        transparent 20%,

        rgba(255,255,255,.45),

        transparent 80%

    );

    transform:translateX(-140%);

    transition:1.3s;

    pointer-events:none;

}

.revenue-dashboard:hover::before{

    transform:translateX(140%);

}



/*=========================================
Live Status
=========================================*/

.dashboard-status{

    position:relative;

    padding-left:18px;

}

.dashboard-status::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22C55E;

    transform:translateY(-50%);

    animation:livePulse 2s infinite;

}

@keyframes livePulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.45);

    }

    70%{

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

    }

    100%{

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

    }

}



/*=========================================
Revenue Animation
=========================================*/

.dashboard-highlight h3{

    animation:fadeUp .8s ease;

}

.highlight-growth{

    animation:fadeUp .95s ease;

}



/*=========================================
Metric Cards
=========================================*/

.metric-card{

    opacity:0;

    transform:translateY(30px);

    animation:metricReveal .7s forwards;

}

.metric-card:nth-child(1){

    animation-delay:.1s;

}

.metric-card:nth-child(2){

    animation-delay:.18s;

}

.metric-card:nth-child(3){

    animation-delay:.26s;

}

.metric-card:nth-child(4){

    animation-delay:.34s;

}

.metric-card:nth-child(5){

    animation-delay:.42s;

}

.metric-card:nth-child(6){

    animation-delay:.5s;

}

@keyframes metricReveal{

    to{

        opacity:1;

        transform:none;

    }

}



/*=========================================
Chart
=========================================*/

.chart-line{

    overflow:hidden;

}

.chart-line::after{

    content:"";

    position:absolute;

    inset:0;

    background:#2563EB;

    transform-origin:left center;

    animation:chartGrow 1.4s ease forwards;

}

@keyframes chartGrow{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}



/*=========================================
Grid Animation
=========================================*/

.chart-grid{

    opacity:.55;

    animation:gridFade 1.4s ease;

}

@keyframes gridFade{

    from{

        opacity:0;

    }

    to{

        opacity:.55;

    }

}



/*=========================================
Viewability Progress
=========================================*/

.metric-card:first-child::after{

    position:relative;

    overflow:hidden;

}

.metric-card:first-child::before{

    content:"Target 65%";

    display:block;

    margin-top:1rem;

    color:#94A3B8;

    font-size:.75rem;

    letter-spacing:.04em;

}



/*=========================================
Performance Items
=========================================*/

.performance-item{

    position:relative;

    overflow:hidden;

}

.performance-item::after{

    content:"";

    position:absolute;

    inset:auto 0 0 0;

    height:2px;

    width:0;

    background:#3B82F6;

    transition:.45s;

}

.performance-item:hover::after{

    width:100%;

}



/*=========================================
Stack Chips
=========================================*/

.stack-items span{

    position:relative;

    overflow:hidden;

}

.stack-items span::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transform:translateX(-120%);

}

.stack-items span:hover::before{

    transition:.8s;

    transform:translateX(120%);

}



/*=========================================
Section Entrance
=========================================*/

.section-header{

    animation:fadeUp .8s ease;

}

.revenue-content{

    animation:fadeUp 1s ease;

}

.revenue-dashboard{

    animation:fadeUp 1s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



/*=========================================
Reduced Motion
=========================================*/

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

    *{

        animation:none!important;

        transition:none!important;

    }

}

.grow-monetize .revenue-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1rem;

}

.grow-monetize .viewability-widget{

    background:#0F172A;

    border-radius:18px;

    padding:1.25rem;

}

.grow-monetize .viewability-widget h4{

    color:#fff;

    font-size:2rem;

    margin:.4rem 0;

}

.grow-monetize .viewability-widget small{

    color:#CBD5E1;

}

.grow-monetize .progress{

    height:6px;

    margin-top:1rem;

    background:#243244;

    border-radius:999px;

}

.grow-monetize .progress span{

    display:block;

    height:100%;

    border-radius:999px;

    background:#3B82F6;

}

.grow-monetize .revenue-trend{

    background:#ffffff;

    border-radius:18px;

    padding:1.25rem;

    border:1px solid #E5E7EB;

}


.grow-monetize .revenue-trend{

    background:#ffffff;

    border-radius:18px;

    padding:1.25rem;

    border:1px solid #E5E7EB;

}

.grow-monetize .mini-chart{

    height:110px;

    margin-top:1rem;

    position:relative;

    background:#F8FAFC;

    border-radius:12px;

    overflow:hidden;

}

.grow-monetize .revenue-stats{

    display:grid;

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

    gap:.8rem;

}


.grow-monetize .stat{

    padding:1rem;

    border:1px solid #E2E8F0;

    border-radius:14px;

}

.grow-monetize .stat-number{

    display:block;

    font-size:1.3rem;

    font-weight:700;

    color:#111827;

}

.grow-monetize .stat-label{

    font-size:.8rem;

    color:#64748B;

}


.grow-monetize .revenue-showcase{

    display:grid;

    grid-template-columns:1.25fr .75fr;

    gap:3rem;

    align-items:center;

}

/*==================================================
REVENUE DASHBOARD LIGHT CARD FIX
==================================================*/


.grow-monetize .revenue-dashboard{

    background:#ffffff;

    color:#0F172A;

}


.grow-monetize .revenue-dashboard *{

    color:inherit;

}


/* Header */

.grow-monetize .revenue-header{

    color:#64748B;

}


/* Revenue title */

.grow-monetize .summary-label{

    color:#64748B;

}


.grow-monetize .summary-value{

    color:#0F172A;

}


.grow-monetize .summary-growth{

    color:#16A34A;

}


/* KPI */

.grow-monetize .revenue-stat{

    background:#ffffff;

    border:1px solid #E2E8F0;

}


.grow-monetize .revenue-stat .stat-number{

    color:#0F172A;

}


.grow-monetize .revenue-stat .stat-label{

    color:#64748B;

}


/* Viewability */

.grow-monetize .viewability-widget{

    background:#0F172A;

}


.grow-monetize .viewability-widget *{

    color:#ffffff;

}


/* Trend */

.grow-monetize .revenue-trend{

    background:#F8FAFC;

}


.grow-monetize .revenue-trend .card-label{

    color:#64748B;

}

/*==================================================
LIGHT THEME — INTENTIONAL DARK REVENUE SECTION
==================================================*/

[data-theme="light"] .grow-monetize{

    background:#101828;

}

[data-theme="light"] .grow-monetize .section-title,
[data-theme="light"] .grow-monetize .revenue-content h3,
[data-theme="light"] .grow-monetize .performance-item h4,
[data-theme="light"] .grow-monetize .stack-label{

    color:#F8FAFC;

}

[data-theme="light"] .grow-monetize .section-description,
[data-theme="light"] .grow-monetize .revenue-content > p,
[data-theme="light"] .grow-monetize .performance-item p{

    color:#94A3B8;

}

[data-theme="light"] .grow-monetize .performance-item,
[data-theme="light"] .grow-monetize .platform-stack{

    background:rgba(255,255,255,.03);

    border-color:rgba(255,255,255,.06);

}

[data-theme="light"] .grow-monetize .stack-items span{

    background:rgba(255,255,255,.05);

    border-color:rgba(255,255,255,.08);

    color:#CBD5E1;

}