/* =====================================================
   Finance Assistant
   FILE : landing.css
   DESCRIPTION : Landing Page
   VERSION : 2.0.0
===================================================== */


/* =====================================================
   BODY
===================================================== */

body{

    margin:0;

    background:#F6F8FC;

    color:#1F2937;

    font-family:Inter,sans-serif;

    line-height:1.7;

}


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

section,

header{

    width:min(

        1100px,

        calc(100% - 40px)

    );

    margin:auto;

}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.hero-content{

    max-width:760px;

}


/* =====================================================
   BADGE
===================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:#EAF2FF;

    color:#2563EB;

    font-weight:600;

    font-size:14px;

}


/* =====================================================
   TITLE
===================================================== */

.hero h1{

    margin:24px 0 20px;

    font-size:clamp(

        40px,

        8vw,

        64px

    );

    line-height:1.1;

    font-weight:800;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.hero p{

    color:#6B7280;

    font-size:18px;

    margin-bottom:20px;

}


.hero-note{

    font-size:15px;

    color:#94A3B8;

}


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

button{

    margin-top:20px;

    border:none;

    border-radius:14px;

    padding:16px 34px;

    background:#2563EB;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}


button:hover{

    transform:translateY(-2px);

    box-shadow:

    0 12px 25px

    rgba(

        37,

        99,

        235,

        .25

    );

}


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

section{

    margin-bottom:80px;

}


section h2{

    margin-bottom:18px;

    font-size:34px;

}


section p{

    color:#6B7280;

}


/* =====================================================
   MODULE SECTION
===================================================== */

.modules{

    margin-bottom:60px;

}


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

   3 × 2

   Saving          Financial       Kas

   Payroll Monthly Payroll Daily    Airdrop
===================================================== */

.module-grid{

    display:grid;

    grid-template-columns:

        repeat(

            3,

            1fr

        );

    gap:14px;

    margin-top:24px;

}


/* =====================================================
   MODULE CARD
===================================================== */

.module-card{

    width:100%;

    min-height:95px;

    margin:0;

    padding:14px 10px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    background:#fff;

    color:#1F2937;

    border:

        1px solid

        #E5E7EB;

    border-radius:18px;

    box-shadow:

        0 5px 18px

        rgba(

            15,

            23,

            42,

            .05

        );

    cursor:pointer;

    transition:.25s;

}


.module-card:hover{

    transform:translateY(-2px);

    box-shadow:

        0 10px 24px

        rgba(

            15,

            23,

            42,

            .08

        );

}


.module-card.active{

    border-color:#2563EB;

    background:#F8FBFF;

    box-shadow:

        0 8px 22px

        rgba(

            37,

            99,

            235,

            .10

        );

}


/* =====================================================
   MODULE ICON
===================================================== */

.module-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#F1F5F9;

    font-size:21px;

    line-height:1;

}


/* =====================================================
   MODULE NAME
===================================================== */

.module-name{

    font-size:14px;

    font-weight:700;

    line-height:1.2;

    text-align:center;

}


/* =====================================================
   MODULE DESCRIPTION
===================================================== */

.module-description{

    display:none;

}


/* =====================================================
   MODULE SLIDER SECTION
===================================================== */

.module-slider-section{

    margin-bottom:80px;

}


/* =====================================================
   MODULE SLIDER
===================================================== */

.module-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:24px;

    background:#111827;

    box-shadow:

        0 10px 30px

        rgba(

            15,

            23,

            42,

            .08

        );

}


/* =====================================================
   MODULE SLIDE
===================================================== */

.module-slide{

    display:none;

    position:relative;

    width:100%;

    min-height:360px;

    overflow:hidden;

}


/* =====================================================
   ACTIVE SLIDE
===================================================== */

.module-slide.active{

    display:block;

}


/* =====================================================
   SLIDE IMAGE
===================================================== */

.module-slide img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

}


/* =====================================================
   SLIDE CONTENT
===================================================== */

.module-slide-content{

    position:absolute;

    left:20px;

    right:20px;

    bottom:20px;

    padding:16px;

    border-radius:16px;

    background:

        rgba(

            15,

            23,

            42,

            .72

        );

    color:#fff;

    backdrop-filter:blur(8px);

}


/* =====================================================
   SLIDE TITLE
===================================================== */

.module-slide-content h3{

    margin:0 0 4px;

    font-size:20px;

    line-height:1.3;

}


/* =====================================================
   SLIDE DESCRIPTION
===================================================== */

.module-slide-content p{

    margin:0;

    color:

        rgba(

            255,

            255,

            255,

            .85

        );

    font-size:14px;

}


/* =====================================================
   SLIDER INDICATORS
===================================================== */

.module-slider-indicators{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-top:14px;

}


/* =====================================================
   SLIDER DOT
===================================================== */

.module-slider-dot{

    width:7px;

    height:7px;

    padding:0;

    margin:0;

    border:none;

    border-radius:50%;

    background:#CBD5E1;

    cursor:pointer;

    transition:

        width .25s,

        background .25s;

}


.module-slider-dot:hover{

    transform:none;

    box-shadow:none;

}


/* =====================================================
   ACTIVE DOT
===================================================== */

.module-slider-dot.active{

    width:20px;

    border-radius:999px;

    background:#2563EB;

}


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

ul{

    margin:0;

    padding:0;

    list-style:none;

    display:grid;

    gap:14px;

}


li{

    background:#fff;

    padding:18px 22px;

    border-radius:18px;

    box-shadow:

        0 5px 18px

        rgba(

            15,

            23,

            42,

            .05

        );

}


/* =====================================================
   CTA
===================================================== */

section:last-of-type{

    text-align:center;

    padding:70px 40px;

    background:#fff;

    border-radius:28px;

    box-shadow:

        0 10px 30px

        rgba(

            15,

            23,

            42,

            .05

        );

}


/* =====================================================
   FOOTER
===================================================== */

footer{

    padding:50px 20px;

    text-align:center;

    color:#94A3B8;

}


footer small{

    display:block;

    margin-top:10px;

}


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

@media(

max-width:768px

){

    .hero{

        min-height:auto;

        padding:90px 0;

    }


    .hero h1{

        font-size:42px;

    }


    section h2{

        font-size:28px;

    }


    button{

        width:100%;

    }


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

       Tetap 3 kolom
    ============================================= */

    .module-grid{

        grid-template-columns:

            repeat(

                3,

                1fr

            );

        gap:8px;

    }


    .module-card{

        min-height:82px;

        padding:10px 5px;

        border-radius:15px;

    }


    .module-icon{

        width:34px;

        height:34px;

        font-size:18px;

        border-radius:10px;

    }


    .module-name{

        font-size:11px;

    }


    /* =============================================
       SLIDER
    ============================================= */

    .module-slide{

        min-height:280px;

    }


    .module-slide-content{

        left:12px;

        right:12px;

        bottom:12px;

        padding:12px;

    }


    .module-slide-content h3{

        font-size:17px;

    }


    .module-slide-content p{

        font-size:12px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(

max-width:400px

){

    .module-grid{

        gap:6px;

    }


    .module-card{

        min-height:78px;

        padding:8px 4px;

    }


    .module-icon{

        width:30px;

        height:30px;

        font-size:16px;

    }


    .module-name{

        font-size:10px;

    }

}

/* =====================================================
   MODULES
===================================================== */

.modules{

    margin-bottom:60px;

}


.modules-description{

    margin-bottom:28px;

    color:#6B7280;

}


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

.module-grid{

    display:grid;

    grid-template-columns:

        repeat(

            3,

            1fr

        );

    gap:16px;

}


/* =====================================================
   MODULE CARD
===================================================== */

.module-card{

    margin:0;

    width:100%;

    min-height:100px;

    padding:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:1px solid #E5E7EB;

    border-radius:20px;

    background:#FFFFFF;

    color:#1F2937;

    box-shadow:

        0 5px 18px

        rgba(

            15,

            23,

            42,

            .05

        );

    cursor:pointer;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

}


.module-card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 12px 25px

        rgba(

            15,

            23,

            42,

            .08

        );

}


.module-card.active{

    border-color:#2563EB;

    box-shadow:

        0 10px 25px

        rgba(

            37,

            99,

            235,

            .15

        );

}


/* =====================================================
   MODULE ICON
===================================================== */

.module-icon{

    font-size:28px;

    line-height:1;

}


.module-name{

    font-size:15px;

    font-weight:700;

    text-align:center;

}


/* =====================================================
   MODULE SLIDER SECTION
===================================================== */

.module-slider-section{

    margin-bottom:20px;

}


.module-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:28px;

    background:#FFFFFF;

    box-shadow:

        0 10px 30px

        rgba(

            15,

            23,

            42,

            .08

        );

}


/* =====================================================
   MODULE SLIDE
===================================================== */

.module-slide{

    display:none;

    width:100%;

    animation:

        moduleSlideIn .45s ease;

}


.module-slide.active{

    display:block;

}


.module-slide img{

    display:block;

    width:100%;

    height:auto;

    object-fit:cover;

}


/* =====================================================
   SLIDE CONTENT
===================================================== */

.module-slide-content{

    padding:24px 28px 28px;

}


.module-slide-content h3{

    margin:0 0 8px;

    font-size:24px;

    line-height:1.2;

}


.module-slide-content p{

    margin:0;

    color:#6B7280;

}


/* =====================================================
   SLIDER INDICATORS
===================================================== */

.module-slider-indicators{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:18px;

}


.module-slider-dot{

    width:8px;

    min-width:8px;

    height:8px;

    min-height:8px;

    margin:0;

    padding:0;

    border:none;

    border-radius:50%;

    background:#CBD5E1;

    cursor:pointer;

    transition:

        width .25s ease,

        background .25s ease,

        transform .25s ease;

}


.module-slider-dot:hover{

    transform:none;

    box-shadow:none;

}


.module-slider-dot.active{

    width:24px;

    background:#2563EB;

    border-radius:999px;

}


/* =====================================================
   SLIDE ANIMATION
===================================================== */

@keyframes moduleSlideIn{

    from{

        opacity:0;

        transform:translateX(20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

@media(

max-width:768px

){

    .module-grid{

        grid-template-columns:

            repeat(

                3,

                1fr

            );

        gap:10px;

    }


    .module-card{

        min-height:86px;

        padding:12px 6px;

        border-radius:16px;

    }


    .module-icon{

        font-size:23px;

    }


    .module-name{

        font-size:12px;

    }


    .module-slider{

        border-radius:22px;

    }


    .module-slide-content{

        padding:20px;

    }


    .module-slide-content h3{

        font-size:20px;

    }

}


@media(

max-width:420px

){

    .module-grid{

        gap:8px;

    }


    .module-card{

        min-height:80px;

    }


    .module-icon{

        font-size:21px;

    }


    .module-name{

        font-size:11px;

    }

}