.salary-hero{
    position:relative;

    overflow:hidden;

    padding:70px 0 100px;

    background:
    linear-gradient(135deg,#0f172a 0%,#111827 50%,#1e293b 100%);
}

.salary-bg-grid{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size:40px 40px;
}

.salary-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

/* LEFT */

.salary-badge{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(14px);

    color:white;

    font-weight:700;

    margin-bottom:24px;
}

.salary-content h1{
    font-size:72px;

    line-height:1.02;

    color:white;

    margin-bottom:24px;
}

.salary-content p{
    font-size:20px;

    line-height:1.7;

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

    margin-bottom:36px;

    max-width:620px;
}

/* DASHBOARD */

.salary-dashboard{
    position:relative;

    min-height:520px;
}

.dashboard-window{
    position:relative;

    z-index:2;

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

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

    backdrop-filter:blur(20px);

    border-radius:34px;

    padding:34px;

    color:white;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.3);
}

.dashboard-top{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:36px;
}

.dashboard-dots{
    display:flex;

    gap:8px;
}

.dashboard-dots span{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#64748b;
}

.dashboard-label{
    font-size:14px;

    font-weight:700;

    color:#cbd5e1;
}

/* DISPLAY */

.salary-display{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;
}

.salary-amount{
    font-size:54px;

    font-weight:800;
}

.salary-status{
    background:#22c55e;

    padding:10px 16px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;
}

/* BARS */

.salary-bars{
    display:flex;

    flex-direction:column;

    gap:26px;
}

.salary-bar span{
    display:block;

    margin-bottom:12px;

    color:#cbd5e1;
}

.bar-line{
    height:14px;

    border-radius:999px;

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

    overflow:hidden;
}

.bar-fill{
    height:100%;

    border-radius:999px;
}

.fill-one{
    width:82%;

    background:#3b82f6;
}

.fill-two{
    width:56%;

    background:#06b6d4;
}

.fill-three{
    width:34%;

    background:#ef4444;
}

/* FLOATING */

.salary-widget{
    position:absolute;

    z-index:5;

    width:210px;

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

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

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:22px;

    color:white;

    animation:salaryFloat 6s ease-in-out infinite;
}

.salary-widget span{
    font-size:34px;

    display:block;

    margin-bottom:14px;
}

.salary-widget strong{
    line-height:1.5;
}

.widget-tax{
    top:-50px;
    right:240px;
}

.widget-news{
    bottom:20px;
    right:20px;

    animation-delay:2s;
}

/* ANIMATION */

@keyframes salaryFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* CALCULATORS */

.salary-calculators{
    background:white;
}

.salary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.salary-card{
    background:#f8fafc;
    border-radius:32px;
    padding:36px;
    transition:0.3s;
    display:flex;
    flex-direction:column;
}

.salary-card:hover{
    transform:translateY(-8px);
}

.salary-card-icon{
    width:78px;
    height:78px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    background:#dbeafe;

    font-size:36px;

    margin-bottom:26px;
}

.salary-card h3{
    font-size:28px;

    line-height:1.15;

    margin-bottom:18px;
}

.salary-card p{
    color:var(--muted);

    line-height:1.7;

    margin-bottom:24px;
}

.salary-card ul{
    padding-left:18px;

    line-height:1.9;

    color:#475569;

    margin-bottom:28px;
}

.salary-link{
    text-decoration:none;
    font-weight:700;
    color:#2563eb;
    margin-top:auto;
}

/* UNIVERSAL */

.universal-salary-card{
    background:
    linear-gradient(135deg,#2563eb,#4f46e5);

    color:white;
}

.universal-salary-card p,
.universal-salary-card ul,
.universal-salary-card .salary-link{
    color:rgba(255,255,255,0.88);
}

.universal-salary-card .salary-card-icon{
    background:rgba(255,255,255,0.14);
}

/* VACATION */

.vacation-card{
    background:
    linear-gradient(135deg,#0ea5a4,#14b8a6);

    color:white;
    
}

.vacation-card p,
.vacation-card ul,
.vacation-card .salary-link{
    color:rgba(255,255,255,0.88);
}

.vacation-card .salary-card-icon{
    background:rgba(255,255,255,0.14);
}
/* FEATURES */

.salary-features{
    background:#f8fafc;
}

.features-grid{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;
}

.feature-card{
    background:white;

    border-radius:30px;

    padding:34px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.feature-icon{
    width:74px;
    height:74px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    background:#eef2ff;

    font-size:34px;

    margin-bottom:24px;
}

.feature-card h3{
    font-size:28px;

    margin-bottom:16px;
}

.feature-card p{
    color:var(--muted);

    line-height:1.7;
}

/* NEWS */

.salary-news{
    background:white;
}

.news-box{
    background:
    linear-gradient(135deg,#0f172a,#1e293b);

    border-radius:40px;

    padding:60px;

    color:white;
}

.news-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;
}

.news-header h2{
    font-size:48px;
}

.news-header a{
    text-decoration:none;

    color:#93c5fd;

    font-weight:700;
}

.news-grid{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;
    cursor:pointer;
}

.news-card{
    background:rgba(255,255,255,0.06);

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

    border-radius:28px;

    padding:28px;
}

.news-date{
    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

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

    margin-bottom:18px;

    font-size:14px;

    font-weight:700;
}

.news-card h3{
    font-size:26px;

    line-height:1.2;

    margin-bottom:16px;
}

.news-card p{
    color:rgba(255, 255, 255, 0.941);

    line-height:1.7;
}

.news-card a{
    color:#2563eb;

    line-height:1.7;
}

/* MOBILE */

@media(max-width:980px){

    .salary-hero-grid{
        grid-template-columns:1fr;
    }

    .salary-content h1{
        font-size:54px;
    }

}

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .salary-hero{
        padding:40px 0 70px;
    }

    .salary-dashboard{
        min-height:420px;
    }

    .salary-widget{
        width:170px;

        padding:16px;
    }

    .widget-tax{
        top:60px;
        right:-10px;
    }

    .widget-news{
        bottom:-30px;
        right:10px;
    }

    .news-box{
        padding:40px 24px;
    }

}

@media(max-width:640px){

    .salary-content h1,
    .news-header h2{
        font-size:38px;
    }

    .salary-display{
        flex-direction:column;

        align-items:flex-start;

        gap:18px;
    }

    .salary-amount{
        font-size:40px;
    }

    .dashboard-window{
        padding:22px;
    }

    .news-header{
        flex-direction:column;

        align-items:flex-start;

        gap:16px;
    }

}