/* HERO */

.flux_hero{

    min-height:90vh;

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

    padding:160px 8% 100px;

    text-align:center;
}

.flux_hero_content{
    max-width:900px;
}

.flux_badge{

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

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

    padding:12px 22px;

    border-radius:30px;

    display:inline-block;

    margin-bottom:30px;

    color:#d1d5db;
}

.flux_hero h1{

    font-size:72px;

    margin-bottom:25px;

    line-height:1.1;
}

.flux_hero h1 span{
    color:#f3f4f6;
}

.flux_hero p{

    font-size:20px;

    line-height:1.8;

    color:#c7cbd1;

    margin-bottom:40px;
}

.flux_buttons{

    display:flex;

    justify-content:center;

    gap:20px;
}

/* FEATURES */

.flux_features{

    display:grid;

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

    gap:30px;
}

.flux_feature_card{

    background:rgba(44,48,54,0.75);

    border:1px solid #3f444d;

    border-radius:20px;

    padding:40px;

    transition:0.4s;
}

.flux_feature_card:hover{

    transform:translateY(-10px);

    background:#343941;
}

.flux_icon{

    width:70px;
    height:70px;

    border-radius:18px;

    background:#3b4048;

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

    font-size:30px;

    margin-bottom:25px;
}

.flux_feature_card h3{

    margin-bottom:20px;

    font-size:24px;
}

.flux_feature_card p{

    color:#b7bcc4;

    line-height:1.8;
}

/* KANBAN */

.kanban_board{

    display:grid;

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

    gap:25px;
}

.kanban_column{

    background:rgba(44,48,54,0.65);

    border:1px solid #3f444d;

    border-radius:20px;

    padding:20px;

    min-height:500px;
}

.kanban_header{

    padding:15px;

    border-radius:12px;

    background:#2d3138;

    margin-bottom:20px;

    font-weight:700;

    text-align:center;
}

.active_status{
    background:#404752;
}

.success_status{
    background:#4d5a4d;
}

.kanban_dropzone{

    min-height:400px;
}

.task_card{

    background:#383d45;

    border:1px solid #4a505b;

    padding:18px;

    border-radius:16px;

    margin-bottom:18px;

    cursor:grab;

    transition:0.3s;
}

.task_card:hover{

    transform:scale(1.02);

    background:#434952;
}

.task_card.dragging{
    opacity:0.5;
}

.task_card h4{

    margin-bottom:10px;
}

.task_card p{

    color:#c7cbd1;

    margin-bottom:15px;

    line-height:1.6;
}

.task_info{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.task_badge{

    width:fit-content;

    padding:8px 14px;

    border-radius:20px;

    background:#505865;

    font-size:13px;
}

/* PASSOS */

.flux_steps{

    display:grid;

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

    gap:25px;
}

.step_card{

    background:rgba(44,48,54,0.75);

    border:1px solid #3f444d;

    border-radius:20px;

    padding:40px;

    transition:0.4s;
}

.step_card:hover{

    transform:translateY(-8px);
}

.step_card span{

    font-size:42px;

    color:#9ca3af;

    font-weight:700;

    display:block;

    margin-bottom:20px;
}

.step_card h3{

    margin-bottom:15px;
}

.step_card p{

    color:#c7cbd1;

    line-height:1.7;
}

/* RESPONSIVO */

@media(max-width:1000px){

    .flux_features,
    .kanban_board,
    .flux_steps{

        grid-template-columns:1fr;
    }

    .flux_hero h1{
        font-size:52px;
    }
}

@media(max-width:768px){

    .flux_buttons{
        flex-direction:column;
    }

    .flux_hero h1{
        font-size:42px;
    }

    .flux_hero p{
        font-size:18px;
    }
}

/* HERO IMAGE */

.flux_hero{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:60px;

    align-items:center;
}

.flux_hero_image img{

    width:100%;

    border-radius:24px;

    border:1px solid #3f444d;

    box-shadow:
    0 25px 50px rgba(0,0,0,0.35);
}

/* BENEFITS */

.flux_benefits{

    display:grid;

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

    gap:25px;
}

.benefit_box{

    background:rgba(44,48,54,0.75);

    border:1px solid #3f444d;

    border-radius:20px;

    padding:35px;

    transition:0.4s;
}

.benefit_box:hover{

    transform:translateY(-8px);

    background:#343941;
}

.benefit_box h3{

    margin-bottom:18px;
}

.benefit_box p{

    color:#c7cbd1;

    line-height:1.8;
}

/* PARAM */

.param_grid{

    display:grid;

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

    gap:25px;
}

.param_card{

    background:rgba(44,48,54,0.75);

    border:1px solid #3f444d;

    border-radius:20px;

    padding:35px;

    transition:0.4s;
}

.param_card:hover{

    transform:translateY(-8px);
}

.param_card span{

    font-size:42px;

    font-weight:700;

    color:#9ca3af;

    display:block;

    margin-bottom:20px;
}

.param_card h3{

    margin-bottom:18px;
}

.param_card p{

    color:#c7cbd1;

    line-height:1.8;
}

/* PRIORIDADES */

.priority_tag{

    width:fit-content;

    padding:8px 14px;

    border-radius:20px;

    margin-bottom:15px;

    font-size:13px;

    font-weight:600;
}

.red_card .priority_tag{

    background:#5c2f2f;

    color:#ffb3b3;
}

.blue_card .priority_tag{

    background:#2f445c;

    color:#b8d8ff;
}

.green_card .priority_tag{

    background:#2f5c41;

    color:#b9ffd3;
}

/* TASK CARD COLORS */

.red_card{
    border-left:5px solid #c85d5d;
}

.blue_card{
    border-left:5px solid #6ba4ff;
}

.green_card{
    border-left:5px solid #59c58d;
}

/* TASK INFO */

.task_info{

    animation:fadeInfo 0.4s ease;
}

@keyframes fadeInfo{

    from{

        opacity:0;
        transform:translateY(10px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

/* CTA */

.flux_cta{

    background:
    linear-gradient(
        135deg,
        rgba(44,48,54,0.9),
        rgba(33,36,41,0.95)
    );

    border:1px solid #3f444d;

    border-radius:30px;

    padding:70px;

    text-align:center;
}

.flux_cta h2{

    font-size:48px;

    margin-bottom:25px;

    max-width:900px;

    margin-inline:auto;
}

.flux_cta p{

    color:#c7cbd1;

    font-size:20px;

    line-height:1.8;

    max-width:800px;

    margin:0 auto 40px;
}

/* RESPONSIVO */

@media(max-width:1100px){

    .flux_hero,
    .flux_benefits,
    .param_grid{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .flux_cta{

        padding:40px 25px;
    }

    .flux_cta h2{

        font-size:34px;
    }

    .flux_benefits,
    .param_grid{

        grid-template-columns:1fr;
    }
}