/* =========================================================
   FINANCE & ACCOUNTING PAGE
   Scoped only to this page.
========================================================= */

.finance-page{
    --finance-blue:#4c78ff;
    --finance-purple:#a700f5;
    --finance-cyan:#3bd6dc;
    --finance-green:#47d4a0;
}

/* ICONS */
.finance-page .finance-icon{
    width:44px;
    height:44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#536fff;
    background:
        linear-gradient(145deg,rgba(76,120,255,.10),rgba(167,0,245,.07));
    border:1px solid rgba(76,120,255,.11);
    margin-bottom:22px;
    transition:.3s ease;
}

.finance-page .finance-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.finance-page .service-card:hover .finance-icon{
    transform:translateY(-3px);
    color:#fff;
    background:linear-gradient(135deg,#4c78ff,#a700f5);
    box-shadow:0 12px 28px rgba(76,120,255,.18);
}


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

.finance-page .finance-hero{
    position:relative;
    overflow:hidden;
}

.finance-page .finance-hero::before{
    content:"";
    position:absolute;
    width:540px;
    height:540px;
    border-radius:50%;
    right:-130px;
    top:-180px;
    background:radial-gradient(
        circle,
        rgba(167,0,245,.14),
        rgba(76,120,255,.07) 42%,
        transparent 70%
    );
    pointer-events:none;
}

.finance-page .finance-hero::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(to right,transparent,black 52%,black);
}


/* HERO FINANCE DASHBOARD */

.finance-dashboard{
    position:relative;
    z-index:2;
    border-radius:22px;
    padding:17px;
    background:
        radial-gradient(circle at 92% 8%,rgba(167,0,245,.18),transparent 32%),
        linear-gradient(155deg,#10235d 0%,#202270 52%,#44168a 100%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 34px 80px rgba(3,12,52,.27),
        inset 0 1px 0 rgba(255,255,255,.05);
    overflow:hidden;
}

.finance-dashboard::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:38px 38px;
}

.finance-dash-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 2px 14px;
}

.finance-window-dots{
    display:flex;
    gap:5px;
}

.finance-window-dots i{
    width:6px;
    height:6px;
    display:block;
    border-radius:50%;
    background:rgba(255,255,255,.25);
}

.finance-window-dots i:nth-child(2){
    background:#4c78ff;
}

.finance-window-dots i:nth-child(3){
    background:#a700f5;
}

.finance-dash-label{
    font-size:9px;
    color:rgba(255,255,255,.62);
    font-weight:500;
}

.finance-kpi-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.finance-kpi{
    padding:12px;
    border-radius:12px;
    background:rgba(5,19,61,.30);
    border:1px solid rgba(255,255,255,.07);
}

.finance-kpi span{
    display:block;
    color:#96a8cc;
    font-size:8px;
    margin-bottom:5px;
}

.finance-kpi strong{
    color:#fff;
    display:block;
    font-size:16px;
    line-height:1.2;
}

.finance-kpi small{
    display:block;
    font-size:8px;
    color:#5fe0ae;
    margin-top:4px;
}

.finance-dash-body{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.22fr .78fr;
    gap:9px;
    margin-top:9px;
}

.finance-chart-card,
.finance-side-card{
    border-radius:13px;
    background:rgba(5,19,61,.34);
    border:1px solid rgba(255,255,255,.07);
}

.finance-chart-card{
    padding:14px;
}

.finance-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.finance-card-head span{
    color:#fff;
    font-size:10px;
    font-weight:600;
}

.finance-card-head small{
    color:#8fa2c6;
    font-size:8px;
}

.finance-chart{
    height:124px;
    margin-top:13px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.07);
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:100% 31px;
}

.finance-chart svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.finance-side-stack{
    display:grid;
    gap:9px;
}

.finance-side-card{
    padding:13px;
}

.finance-side-title{
    color:#91a4c7;
    font-size:8px;
}

.finance-side-value{
    color:#fff;
    font-size:19px;
    line-height:1.2;
    font-weight:700;
    margin:5px 0 2px;
}

.finance-side-note{
    color:#5fe0ae;
    font-size:8px;
}

.finance-close{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:10px;
}

.finance-ring{
    width:48px;
    height:48px;
    border-radius:50%;
    position:relative;
    flex:0 0 auto;
    background:conic-gradient(
        #3bd6dc 0 82%,
        rgba(255,255,255,.08) 82% 100%
    );
}

.finance-ring::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:50%;
    background:#22276e;
}

.finance-ring b{
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:10px;
}

.finance-close-copy strong{
    display:block;
    color:#fff;
    font-size:9px;
}

.finance-close-copy span{
    display:block;
    color:#8fa2c6;
    font-size:7px;
    margin-top:2px;
}


/* Floating hero cards */

.finance-floating{
    position:absolute;
    z-index:6;
    padding:10px 12px;
    border-radius:11px;
    background:#fff;
    border:1px solid #e5eaf3;
    box-shadow:0 16px 35px rgba(5,20,60,.13);
}

.finance-floating b{
    display:block;
    font-size:10px;
    color:#01195b;
}

.finance-floating span{
    display:block;
    margin-top:2px;
    font-size:8px;
    color:#75869c;
}

.finance-floating.cash{
    right:-15px;
    top:45%;
}

.finance-floating.close{
    left:-20px;
    bottom:8px;
}


/* =========================================================
   MODULE GRID
========================================================= */

.finance-module-card{
    height:100%;
    padding:22px;
    border-radius:17px;
    background:#fff;
    border:1px solid var(--jizai-line);
    transition:.3s ease;
}

.finance-module-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(1,25,91,.08);
}

.finance-module-card h3{
    font-size:16px;
    color:var(--jizai-navy);
    margin:0 0 8px;
    font-weight:600;
}

.finance-module-card p{
    color:var(--jizai-muted);
    font-size:13px;
    line-height:1.65;
    margin:0;
}


/* =========================================================
   TRANSFORMATION
========================================================= */

.finance-transform-card{
    height:100%;
    border-radius:20px;
    padding:27px;
    border:1px solid var(--jizai-line);
    background:#fff;
}

.finance-transform-card.after{
    color:#fff;
    border:0;
    background:
        radial-gradient(circle at 90% 5%,rgba(167,0,245,.18),transparent 32%),
        linear-gradient(145deg,#071b45,#152679);
}

.finance-transform-label{
    display:inline-flex;
    padding:6px 9px;
    border-radius:8px;
    margin-bottom:17px;
    font-size:9px;
    font-weight:600;
    background:#f1f5fa;
    color:#728196;
}

.finance-transform-card.after .finance-transform-label{
    color:#99e8e9;
    background:rgba(59,214,220,.09);
}

.finance-transform-card h3{
    font-size:20px;
    margin:0 0 19px;
    color:var(--jizai-navy);
}

.finance-transform-card.after h3{
    color:#fff;
}

.finance-transform-list{
    display:grid;
    gap:0;
}

.finance-transform-item{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 0;
    border-bottom:1px solid #edf1f5;
    color:#576a81;
    font-size:12px;
}

.finance-transform-card.after .finance-transform-item{
    color:#a8bad0;
    border-color:rgba(255,255,255,.07);
}

.finance-transform-item:last-child{
    border-bottom:0;
}

.finance-transform-check{
    width:24px;
    height:24px;
    border-radius:7px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    color:#6174ff;
    background:#eef2ff;
}

.finance-transform-card.after .finance-transform-check{
    color:#7de4e5;
    background:rgba(59,214,220,.09);
}

.finance-transform-check svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}


/* =========================================================
   BENEFITS
========================================================= */

.finance-benefit-card{
    height:100%;
    position:relative;
    overflow:hidden;
}

.finance-benefit-card::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,#4c78ff,#a700f5);
    opacity:.65;
}

.finance-benefit-card .finance-icon{
    margin-bottom:17px;
}

.finance-benefit-card strong{
    font-size:17px!important;
    color:var(--jizai-navy);
}

.finance-benefit-card p{
    margin:5px 0 0;
}


/* =========================================================
   WHY JIZAI
========================================================= */

.finance-why-card{
    position:relative;
    overflow:hidden;
}

.finance-why-card::before{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50%;
    right:-45px;
    top:-45px;
    background:rgba(76,120,255,.06);
}


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

@media(max-width:1199px){

    .finance-floating{
        display:none;
    }

}

@media(max-width:991px){

    .finance-page .finance-hero::after{
        display:none;
    }

}

@media(max-width:767px){

    .finance-kpi-grid{
        grid-template-columns:1fr;
    }

    .finance-dash-body{
        grid-template-columns:1fr;
    }

    .finance-chart{
        height:105px;
    }

    .finance-dashboard{
        padding:13px;
    }

}