* {
    box-sizing: border-box;
}

body {

    margin: 0;

    font-family: 'Poppins', sans-serif;

    min-height: 100vh;

    overflow-x: hidden;

    position: relative;

    background:
        radial-gradient(circle at top left,
            rgba(79, 70, 229, .10),
            transparent 25%),

        radial-gradient(circle at bottom right,
            rgba(14, 165, 233, .10),
            transparent 25%),

        linear-gradient(135deg,
            #f8fafc 0%,
            #eef2ff 100%);
}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.bg-grid {

    position: fixed;

    inset: 0;

    background-image:
        linear-gradient(rgba(99, 102, 241, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .03) 1px, transparent 1px);

    background-size: 40px 40px;

    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| BLUR
|--------------------------------------------------------------------------
*/

.blur {

    position: absolute;

    border-radius: 999px;

    filter: blur(100px);

    opacity: .45;

    z-index: 2;
}

.blur-1 {

    width: 280px;

    height: 280px;

    background: #6366f1;

    top: -120px;

    left: -120px;
}

.blur-2 {

    width: 340px;

    height: 340px;

    background: #0ea5e9;

    bottom: -140px;

    right: -140px;
}

/*
|--------------------------------------------------------------------------
| FLOATING DASHBOARD
|--------------------------------------------------------------------------
*/

.floating-dashboard {

    position: absolute;

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

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

    backdrop-filter: blur(16px);

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .06);

    z-index: 3;
}

.dashboard-1 {

    width: 260px;

    top: 90px;

    left: 80px;

    padding: 20px;

    animation: floatOne 7s ease-in-out infinite;
}

.dashboard-2 {

    width: 220px;

    bottom: 120px;

    right: 100px;

    padding: 22px;

    animation: floatTwo 7s ease-in-out infinite;
}

@keyframes floatOne {

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

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

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

@keyframes floatTwo {

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

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

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

.dashboard-header {

    display: flex;

    gap: 6px;

    margin-bottom: 18px;
}

.dashboard-dot {

    width: 10px;

    height: 10px;

    border-radius: 999px;
}

.dashboard-line {

    height: 10px;

    background: rgba(148, 163, 184, .18);

    border-radius: 999px;

    margin-bottom: 12px;
}

.dashboard-chart {

    display: flex;

    align-items: flex-end;

    gap: 10px;

    margin-top: 25px;
}

.dashboard-chart .bar {

    flex: 1;

    border-radius: 10px 10px 0 0;

    background: linear-gradient(180deg,
            #6366f1,
            #2563eb);
}

.h-40 {
    height: 40px;
}

.h-55 {
    height: 55px;
}

.h-65 {
    height: 65px;
}

.h-70 {
    height: 70px;
}

.h-90 {
    height: 90px;
}

.dashboard-mini-title {

    font-size: 14px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 15px;
}

.dashboard-progress {

    width: 100%;

    height: 10px;

    border-radius: 999px;

    background: rgba(148, 163, 184, .18);

    overflow: hidden;

    margin-bottom: 12px;
}

.progress-bar {

    width: 92%;

    height: 100%;

    border-radius: 999px;

    background: linear-gradient(135deg,
            #22c55e,
            #16a34a);
}

.dashboard-mini-text {

    font-size: 12px;

    color: #64748b;
}

/*
|--------------------------------------------------------------------------
| MAIN
|--------------------------------------------------------------------------
*/

.login-wrapper {

    position: relative;

    z-index: 10;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;
}

.login-container {

    width: 100%;

    max-width: 500px;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.logo {

    margin-bottom: 28px;

    animation: floatingLogo 5s ease-in-out infinite;
}

.logo img {

    width: 220px;
}

@keyframes floatingLogo {

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

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

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

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero-badge {

    display: inline-flex;

    align-items: center;

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

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

    border-radius: 999px;

    padding: 10px 18px;

    font-size: 12px;

    font-weight: 600;

    color: #475569;

    margin-bottom: 22px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .03);
}

.hero-badge-dot {

    width: 8px;

    height: 8px;

    border-radius: 999px;

    background: #22c55e;

    margin-right: 10px;

    animation: pulse 2s infinite;
}

@keyframes pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.hero-title {

    font-size: 44px;

    font-weight: 700;

    line-height: 1.2;

    color: #0f172a;

    letter-spacing: -.5px;

    margin-bottom: 16px;
}

.hero-subtitle {

    font-size: 16px;

    line-height: 1.9;

    color: #64748b;

    margin-bottom: 30px;
}

/*
|--------------------------------------------------------------------------
| PILLS
|--------------------------------------------------------------------------
*/

.hero-stats {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 35px;
}

.hero-pill {

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

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

    border-radius: 999px;

    padding: 12px 18px;

    font-size: 13px;

    font-weight: 600;

    color: #334155;

    transition: .25s ease;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, .03);
}

.hero-pill:hover {

    transform: translateY(-2px);

    background: #fff;
}

/*
|--------------------------------------------------------------------------
| LOGIN CARD
|--------------------------------------------------------------------------
*/

.login-card {

    position: relative;

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

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

    backdrop-filter: blur(18px);

    border-radius: 34px;

    padding: 45px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .10);

    transition: .35s ease;
}

.login-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 40px 90px rgba(15, 23, 42, .12);
}

.login-title {

    font-size: 30px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 10px;
}

.login-subtitle {

    font-size: 14px;

    line-height: 1.8;

    color: #64748b;

    margin-bottom: 35px;
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.btn-login {

    position: relative;

    overflow: hidden;

    width: 100%;

    border: 0;

    border-radius: 20px;

    padding: 17px;

    background: linear-gradient(135deg,
            #6366f1,
            #2563eb);

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: .35s ease;

    box-shadow:
        0 15px 35px rgba(37, 99, 235, .25);
}

.btn-login::before {

    content: '';

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

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

    transform: skewX(-20deg);

    transition: .7s;
}

.btn-login:hover::before {

    left: 120%;
}

.btn-login:hover {

    transform: translateY(-3px);

    color: #fff;

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .35);
}

.btn-login img {

    height: 20px;

    margin-right: 12px;
}

/*
|--------------------------------------------------------------------------
| WORKFLOW
|--------------------------------------------------------------------------
*/

.workflow {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}

.workflow-item {

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

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

    border-radius: 14px;

    padding: 10px 16px;

    font-size: 12px;

    font-weight: 600;

    color: #475569;
}

.workflow-separator {

    width: 24px;

    height: 1px;

    background: #cbd5e1;
}

/*
|--------------------------------------------------------------------------
| VERSION
|--------------------------------------------------------------------------
*/

.version {

    margin-top: 28px;

    font-size: 12px;

    font-weight: 600;

    color: #94a3b8;
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.footer {

    position: fixed;

    bottom: 18px;

    left: 0;

    width: 100%;

    text-align: center;

    font-size: 13px;

    color: #64748b;

    z-index: 20;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width: 992px) {

    .floating-dashboard {

        display: none;
    }
}

@media(max-width: 768px) {

    body {

        overflow-y: auto;
    }

    .login-wrapper {

        padding: 35px 18px 80px;
    }

    .logo img {

        width: 170px;
    }

    .hero-title {

        font-size: 32px;
    }

    .hero-subtitle {

        font-size: 14px;
    }

    .hero-stats {

        gap: 10px;
    }

    .hero-pill {

        font-size: 12px;

        padding: 10px 15px;
    }

    .login-card {

        padding: 34px 24px;

        border-radius: 28px;
    }

    .login-title {

        font-size: 25px;
    }

    .workflow-separator {

        display: none;
    }

    .footer {

        font-size: 12px;

        padding: 0 20px;
    }
}

@media(max-width: 480px) {

    .hero-title {

        font-size: 28px;
    }

    .hero-pill {

        width: 100%;

        justify-content: center;
    }

    .btn-login {

        font-size: 14px;

        padding: 15px;
    }
}